<script src="@/js/tool/bazi.js"></script>

<template>
  <div class="bazi" id="app">
    <div class="margins">

      <!-- ★ 导航 ★ -->
      <div class="navigations">

        <!-- 1、顶部左侧导航 -->
        <div class="leftNavigations">
          <Breadcrumb separator=">">
            <span v-for="item in topLeftNavigations" :key="item">
              <BreadcrumbItem :to="item.link">
                <Icon :type="item.icon" />
                {{ item.title }}
              </BreadcrumbItem>
            </span>
          </Breadcrumb>
        </div>

        <!-- 2、顶部右侧导航 -->
        <div class="rightNavigations">
          <span v-for="item in topRightNavigations" :key="item" class="spacing">
            <router-link :to="item.link">
              <Tag color="default" class="tag">
                <span class="item">{{ item.title }}</span>
                <!-- <Icon :type="item.icon" /> -->
              </Tag>
            </router-link>
          </span>
          <span class="r"></span>
        </div>

        <div class="divider"><el-divider /></div>

      </div>

      <!-- ★ 示例数据、选项 ★ -->
      <div class="sl-data" v-show="dataPage == 1">
        <Row>

          <!-- 1.1、示例数据 -->
          <Col span="16" v-if="dataShiLiStatus">
          <el-card shadow="never" class="sl-card">

            <template #header>
              <div class="header">
                示例预览
              </div>
            </template>

            <div>
              <Row>

                <!-- 1.1.1、基础 -->
                <Col span="10">
                <el-card shadow="never" class="jc">
                  <div class="data">

                    <div>
                      <Tag size="medium" class="tag">
                        <b>公历日期：</b>{{ dataShiLi.solarStr }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>农历日期：</b>{{ dataShiLi.lunarStr }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>星期：</b>{{ dataShiLi.week }}</Col>
                          <Col span="12"><b>季节：</b>{{ dataShiLi.season }}</Col>
                        </Row>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <Row>
                          <Col span="12"><b>生肖：</b>{{ dataShiLi.zodiac }}</Col>
                          <Col span="12"><b>星座：</b>{{ dataShiLi.constellation }}</Col>
                        </Row>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>生辰八字：</b>{{ dataShiLi.baZi.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>八字五行：</b>
                        <span v-for="index in dataShiLi.baZiWuXing.length" :key="index">
                          <span v-html="wxc2(dataShiLi.baZiWuXing[index - 1])"></span>
                          <span v-if="index !== dataShiLi.baZiWuXing.length">&nbsp;&nbsp;</span>
                        </span>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>八字空亡：</b>{{ dataShiLi.baZiKongWang.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>八字纳音：</b>{{ dataShiLi.baZiNaYin.join('&nbsp;&nbsp;') }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>五行缺失：</b><span v-if="dataShiLi.baZiWuXingQueShi[0] === '五行齐全'">五行齐全</span>
                        <span v-else>
                          <span v-for="index in dataShiLi.baZiWuXingQueShi.length" :key="index">
                            缺<span v-html="wxc(dataShiLi.baZiWuXingQueShi[index - 1])"></span>&nbsp;
                          </span>
                        </span>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>五行数量：</b><span v-for="index in dataShiLi.baZiWuXingCount.length" :key="index">
                          {{ dataShiLi.baZiWuXingCount[index - 1].substring(0, 1) }}<span
                            v-html="wxc(dataShiLi.baZiWuXingCount[index - 1].substring(1, 2))"></span>&nbsp;
                        </span>
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>起运日期：</b>{{ dataShiLi.qiYunDate }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>起运信息：</b>{{ dataShiLi.qiYun }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>胎元胎息：</b>{{ dataShiLi.taiYuan }}、{{ dataShiLi.taiXi }}
                      </Tag>
                    </div>

                    <div>
                      <Tag size="medium" class="tag">
                        <b>命宫身宫：</b>{{ dataShiLi.mingGong }}、{{ dataShiLi.shenGong }}
                      </Tag>
                    </div>

                  </div>
                </el-card>
                </Col>

                <!-- 1.1.2、命盘 -->
                <Col span="14">
                <el-card shadow="never" class="mp">
                  <div class="data">

                    <!-- 上半部分 -->
                    <div class="top">
                      <div class="left">
                        <span class="name">缘主</span>
                        <span class="mark">（{{ dataShiLi.zao }}）</span>
                      </div>
                      <div class="right">
                        <router-link to="/culture/sx">
                          <b class="sx">{{ dataShiLi.zodiac }}</b>
                        </router-link>
                      </div>
                    </div>

                    <!-- 下半部分 -->
                    <div class="bottom">

                      <Row class="bc1">
                        <Col span="4" class="title">☯</Col>
                        <Col span="5" class="title">年柱</Col>
                        <Col span="5" class="title">月柱</Col>
                        <Col span="5" class="title">日柱</Col>
                        <Col span="5" class="title">时柱</Col>
                      </Row>

                      <Row class="bc2">
                        <Col span="4" class="title">主星</Col>
                        <Col span="5">{{ dataShiLi.yearGanZhiZhuXing }}</Col>
                        <Col span="5">{{ dataShiLi.monthGanZhiZhuXing }}</Col>
                        <Col span="5"><b>{{ dataShiLi.dayGanZhiZhuXing }}</b></Col>
                        <Col span="5">{{ dataShiLi.hourGanZhiZhuXing }}</Col>
                      </Row>

                      <Row class="bc3">
                        <Col span="4" class="title">天干</Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.yearGan)"></b>
                        <span v-html="gzwx(dataShiLi.yearGan)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.monthGan)"></b>
                        <span v-html="gzwx(dataShiLi.monthGan)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.dayGan)"></b>
                        <span v-html="gzwx(dataShiLi.dayGan)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.hourGan)"></b>
                        <span v-html="gzwx(dataShiLi.hourGan)"></span>
                        </Col>
                      </Row>

                      <Row class="bc4">
                        <Col span="4" class="title">地支</Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.yearZhi)"></b>
                        <span v-html="gzwx(dataShiLi.yearZhi)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.monthZhi)"></b>
                        <span v-html="gzwx(dataShiLi.monthZhi)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.dayZhi)"></b>
                        <span v-html="gzwx(dataShiLi.dayZhi)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataShiLi.hourZhi)"></b>
                        <span v-html="gzwx(dataShiLi.hourZhi)"></span>
                        </Col>
                      </Row>

                      <Row class="bc5">
                        <Col span="4" class="title2">藏干</Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.yearZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataShiLi.yearZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataShiLi.yearZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.monthZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataShiLi.monthZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataShiLi.monthZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.dayZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataShiLi.dayZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataShiLi.dayZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.hourZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataShiLi.hourZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataShiLi.hourZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                      </Row>

                      <Row class="bc6">
                        <Col span="4" class="title2">副星</Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.yearGanZhiFuXing.length" :key="index">
                          {{ dataShiLi.yearGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.monthGanZhiFuXing.length" :key="index">
                          {{ dataShiLi.monthGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.dayGanZhiFuXing.length" :key="index">
                          {{ dataShiLi.dayGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataShiLi.hourGanZhiFuXing.length" :key="index">
                          {{ dataShiLi.hourGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                      </Row>

                      <Row class="bc1">
                        <Col span="4" class="title">地势</Col>
                        <Col span="5">{{ dataShiLi.yearGanZhiDiShi }}</Col>
                        <Col span="5">{{ dataShiLi.monthGanZhiDiShi }}</Col>
                        <Col span="5">{{ dataShiLi.dayGanZhiDiShi }}</Col>
                        <Col span="5">{{ dataShiLi.hourGanZhiDiShi }}</Col>
                      </Row>

                      <Row class="bc2">
                        <Col span="4" class="title">空亡</Col>
                        <Col span="5">{{ dataShiLi.yearGanZhiKongWang }}</Col>
                        <Col span="5">{{ dataShiLi.monthGanZhiKongWang }}</Col>
                        <Col span="5">{{ dataShiLi.dayGanZhiKongWang }}</Col>
                        <Col span="5">{{ dataShiLi.hourGanZhiKongWang }}</Col>
                      </Row>

                      <Row class="bc1">
                        <Col span="4" class="title">纳音</Col>
                        <Col span="5">{{ dataShiLi.yearGanZhiNaYin }}</Col>
                        <Col span="5">{{ dataShiLi.monthGanZhiNaYin }}</Col>
                        <Col span="5">{{ dataShiLi.dayGanZhiNaYin }}</Col>
                        <Col span="5">{{ dataShiLi.hourGanZhiNaYin }}</Col>
                      </Row>

                      <Row class="bc7">
                        <Col span="4" class="title3">...</Col>
                        <Col span="18" class="title">排盘后查看更多数据</Col>
                      </Row>

                    </div>

                  </div>
                </el-card>
                </Col>

              </Row>
            </div>

          </el-card>
          </Col>
          <!-- 1.2、示例数据加载框架 -->
          <Col span="16" v-if="!dataShiLiStatus">
          <el-card shadow="never" class="sl-card2">
            <Skeleton loading animated :title="false"
              :paragraph="{ rows: 15, width: ['70%', '65%', '70%', '70%', '80%', '75%', '80%', '80%', '90%', '90%', '70%', '100%', '80%', '85%', '100%'] }" />
          </el-card>
          </Col>

          <!-- 2、选项 -->
          <Col span="8">
          <el-card shadow="never" class="xx-card">

            <template #header>
              <div class="header">
                八字排盘
              </div>
            </template>

            <div>

              <div class="name">
                <input placeholder="请输入姓名（选填）" v-model="name" maxlength="10" />
              </div>

              <div class="occupy">
                <input placeholder="请输入占事（选填）" v-model="occupy" maxlength="10" @click="occupyPrompt" />
              </div>

              <div class="dateType">
                <el-segmented class="segmented" v-model="dateTypeStr" :options="dateTypeOptions" />
              </div>

              <div class="sex">
                <el-segmented class="segmented" v-model="sexStr" :options="sexOptions" />
              </div>

              <div class="date">
                <el-date-picker :clearable="false" v-model="date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择日期" :editable="false" style="width:70%;" />
                <Checkbox v-model="isLeapMonth" :disabled="!isLeapMonthStatus" class="leapMonth">
                  闰月
                </Checkbox>
              </div>

              <div class="trueSolar">
                <Checkbox v-model="trueSolar" class="trueSolar" disabled="true">
                  <span>真太阳时</span>
                </Checkbox>

                <!-- <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    <div style="color: #ffbf00;">
                      生效时间：每日6时~7时。
                    </div>
                    <br />
                    <div>
                      暂不支持使用真太阳时预览，请排盘后查看；<br />
                      此功能可能导致排盘速度缓慢或其他未知问题。
                    </div>
                  </template>
                  <Icon type="md-alert" />
                </el-tooltip> -->

                <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    <div>
                      功能正在完善中 ...
                    </div>
                  </template>
                  <Icon type="md-alert" />
                </el-tooltip>

                <span class="beta">&nbsp;beta&nbsp;</span>
              </div>

              <!-- <div class="address" v-if="trueSolar">
                <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    默认按照东八区120°经度时刻（标准时间）排盘；
                    <br />
                    若更换地区（非北京市的其他地区），则使用真太阳时排盘。
                  </template>
                  <Icon type="md-help-circle" />
                </el-tooltip>
                地区：
                <City transfer class="city" v-model="address" show-suffix @on-change="getAddressName" />
              </div> -->

              <div class="qiYunLiuPai">
                起运流派：
                <Select v-model="qiYunLiuPai" style="width:50%;">
                  <template #prefix>
                    <span class="prefix">
                      <Icon type="ios-planet-outline" />
                    </span>
                  </template>
                  <Option v-for="item in qiYunLiuPaiOptions" :key="item" :label="item.label" :value="item.value">
                    {{ item.label }}
                    <span v-if="item.value === 1" class="moren">
                      <Icon type="md-arrow-dropleft-circle" />
                      默认
                    </span>
                  </Option>
                </Select>
                <el-tooltip placement="top" :enterable="false">
                  <template #content>
                    按天和时辰计算：3天1年，1天4个月，1时辰10天。
                    <br />
                    按分钟计算：4320分=1年，360分=1月，12分=1天，1分=2小时。
                  </template>
                  <Icon class="tip" type="md-information-circle" />
                </el-tooltip>
              </div>

              <div class="isRsettingAll">
                <Button shape="circle" size="small" @click="resettingAllMethod">
                  <Icon type="md-refresh" />
                  全部重置
                </Button>
                <Checkbox v-model="isResettingDate" class="isResettingDate">
                  <span>包括日期</span>
                </Checkbox>
              </div>

              <div class="moreOptions">
                <Button shape="circle" size="small" @click="moreOptionsModal = true">
                  <Icon type="ios-settings" />
                  更多选项
                </Button>
              </div>

              <div class="starts">
                <Button :loading="!startsButton" style="width: 100%" class="button" @click="getWanZhengDataMethod">
                  <span v-if="startsButton">
                    开始排盘
                    <span v-show="isTrueSolar" style="font-size:13px;">(真太阳时)</span>
                  </span>
                  <span v-else>
                    排盘中...
                  </span>
                </Button>
              </div>

            </div>

          </el-card>
          </Col>

        </Row>
      </div>

      <!-- ★ 完整数据 ★ -->
      <div class="wz-data" v-show="dataPage == 2">
        <Row>

          <!-- 1、完整数据切换选项 -->
          <Col span="3" v-if="dataWanZhengStatus">
          <!-- <el-affix :offset="70"> -->
          <el-card shadow="never" class="wzqh-card">
            <div class="data">

              <div class="button1" @click="returnPaiPanPageMethod">
                <Icon type="ios-undo" />
                返回
              </div>

              <div class="button2" @click="dataWanZhengPageMethod(1)">
                <b v-show="dataWanZhengPage === 1" class="ml">
                  基本信息
                  <Icon type="md-arrow-dropright-circle" />
                </b>
                <span v-show="dataWanZhengPage !== 1">
                  基本信息
                </span>
              </div>

              <div class="button2" @click="dataWanZhengPageMethod(2)">
                <b v-show="dataWanZhengPage === 2" class="ml">
                  命盘信息
                  <Icon type="md-arrow-dropright-circle" />
                </b>
                <span v-show="dataWanZhengPage !== 2">
                  命盘信息
                </span>
              </div>

              <div class="button2" @click="dataWanZhengPageMethod(3)">
                <b v-show="dataWanZhengPage === 3" class="ml">
                  其他信息
                  <Icon type="md-arrow-dropright-circle" />
                </b>
                <span v-show="dataWanZhengPage !== 3">
                  其他信息
                </span>
              </div>

              <div class="button2" @click="dataWanZhengPageMethod(4)">
                <b v-show="dataWanZhengPage === 4" class="ml">
                  干支参考
                  <Icon type="md-arrow-dropright-circle" />
                </b>
                <span v-show="dataWanZhengPage !== 4">
                  干支参考
                </span>
              </div>

              <!-- <div class="button2" @click="gengduoPrompt">
                  更多信息 ...
                </div> -->

              <div class="wxc">
                <div class="header">
                  <Icon type="ios-analytics" />
                  自定义五行颜色
                </div>

                <div class="c">
                  <Space>
                    <span class="title" v-html="wxc('木')"></span>
                    <ColorPicker v-model="muColor" size="small" @on-active-change="switchMuColor" />
                  </Space>
                </div>
                <div class="c">
                  <Space>
                    <span class="title" v-html="wxc('火')"></span>
                    <ColorPicker v-model="huoColor" size="small" @on-active-change="switchHuoColor" />
                  </Space>
                </div>
                <div class="c">
                  <Space>
                    <span class="title" v-html="wxc('土')"></span>
                    <ColorPicker v-model="tuColor" size="small" @on-active-change="switchTuColor" />
                  </Space>
                </div>
                <div class="c">
                  <Space>
                    <span class="title" v-html="wxc('金')"></span>
                    <ColorPicker v-model="jinColor" size="small" @on-active-change="switchJinColor" />
                  </Space>
                </div>
                <div class="c">
                  <Space>
                    <span class="title" v-html="wxc('水')"></span>
                    <ColorPicker v-model="shuiColor" size="small" @on-active-change="switchShuiColor" />
                  </Space>
                </div>
                <div class="c br but" @click="resettingColor">
                  重置
                </div>
              </div>

            </div>
          </el-card>
          <!-- </el-affix> -->
          </Col>

          <!-- 2.1、完整数据 -->
          <Col span="21" v-if="dataWanZhengStatus">
          <el-card shadow="never" class="wz-card">
            <div class="data">

              <!-- 2.1.1、上半部分 -->
              <div class="header">
                <div class="left">
                  <span class="name">
                    <Ellipsis :text="dataWanZheng.name" :length="3" tooltip />
                  </span>
                  <span class="mark">（{{ dataWanZheng.zao }}）</span>
                  <span class="date">
                    <span class="mr">公历：{{ dataWanZheng.solarStr }}</span>
                    <span class="mr">农历：{{ dataWanZheng.lunarStr }}</span>
                    <span class="mr">星期：{{ dataWanZheng.week }}</span>
                    <span class="mr">季节：{{ dataWanZheng.season }}</span>
                    <span class="ygz">
                      阴干支斜体
                      <el-switch v-model="ganZhiYinYang" size="small"
                        style="--el-switch-on-color:#13ce66; --el-switch-off-color:#bebebe;"></el-switch>
                    </span>
                  </span>
                </div>
                <div class="right">
                  <router-link to="/culture/sx">
                    <b class="sx">{{ dataWanZheng.zodiac }}</b>
                  </router-link>
                </div>
              </div>

              <!-- 2.1.2、下半部分 -->
              <div class="data">

                <!-- 基本信息 -->
                <div class="jiBen" v-show="dataWanZhengPage == 1">

                  <!-- 数据一 -->
                  <div class="jb1">

                    <Row class="bc1">
                      <Col span="8">
                      <span class="title">缘主姓名</span>
                      <span>{{ dataWanZheng.name }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">缘主性别</span>
                      <span>{{ dataWanZheng.sex }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">缘主占事</span>
                      <span v-if="dataWanZheng.occupy == ''" class="null">未知</span>
                      <span v-if="dataWanZheng.occupy != ''">{{ dataWanZheng.occupy }}</span>
                      </Col>
                    </Row>

                    <Row class="bc2">
                      <Col span="8">
                      <span class="title">公历日期</span>
                      <span>{{ dataWanZheng.solarStr }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">农历日期</span>
                      <span>{{ dataWanZheng.lunarStr }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">生肖星座</span>
                      <span>{{ dataWanZheng.zodiac }}、{{ dataWanZheng.constellation }}</span>
                      </Col>
                    </Row>

                    <Row class="bc1">
                      <Col span="8">
                      <span class="title">生辰八字</span>
                      <span>{{ dataWanZheng.baZi.join('&nbsp;&nbsp;') }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">八字五行</span>
                      <span v-for="index in dataWanZheng.baZiWuXing.length" :key="index">
                        <span v-html="wxc2(dataWanZheng.baZiWuXing[index - 1])"></span>
                        <span v-if="index !== dataWanZheng.baZiWuXing.length">&nbsp;&nbsp;</span>
                      </span>
                      </Col>
                      <Col span="8">
                      <span class="title">八字空亡</span>
                      <span>{{ dataWanZheng.baZiKongWang.join('&nbsp;&nbsp;') }}</span>
                      </Col>
                    </Row>

                    <Row class="bc2">
                      <Col span="8">
                      <span class="title2">八字纳音</span>
                      <span>{{ dataWanZheng.baZiNaYin.join('&nbsp;&nbsp;') }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">年命信息</span>
                      <span>{{ dataWanZheng.yearGanZhiNaYin }}命</span>
                      </Col>
                      <Col span="8">
                      <span class="title">命卦信息</span>
                      <span>{{ dataWanZheng.mingGua }}</span>
                      </Col>
                    </Row>

                    <Row class="bc1">
                      <Col span="8">
                      <span class="title">日主属性</span>
                      <span v-html="gzgl(dataWanZheng.dayZhuAttribute.substring(0, 1))"></span>
                      <span v-html="gzwx(dataWanZheng.dayZhuAttribute.substring(0, 1))"></span>
                      </Col>
                      <Col span="16">
                      <span class="title">出生节气</span>
                      <span>{{ dataWanZheng.birthSolarTerms }}</span>
                      </Col>
                    </Row>

                    <Row class="bc2">
                      <Col span="8">
                      <span class="title">{{ dataWanZheng.prevJieQi }}日期</span>
                      <span>{{ dataWanZheng.prevJieQiDate }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">{{ dataWanZheng.nextJieQi }}日期</span>
                      <span>{{ dataWanZheng.nextJieQiDate }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">星宿信息</span>
                      <span>{{ dataWanZheng.xingXiu }}（{{ dataWanZheng.xiuJiXiong }}）</span>
                      </Col>
                    </Row>

                    <Row class="bc1">
                      <Col span="8">
                      <span class="title">起运日期</span>
                      <span>{{ dataWanZheng.qiYunDate }}</span>
                      </Col>
                      <Col span="16">
                      <span class="title">起运信息</span>
                      <span>{{ dataWanZheng.qiYun }}</span>
                      </Col>
                    </Row>

                    <Row class="bc2">
                      <Col span="8">
                      <span class="title2">胎元胎息</span>
                      <span>{{ dataWanZheng.taiYuan }}、{{ dataWanZheng.taiXi }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title2">命宫身宫</span>
                      <span>{{ dataWanZheng.mingGong }}、{{ dataWanZheng.shenGong }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">身体强弱</span>
                      <span>{{ dataWanZheng.bodyIntensity }}</span>
                      </Col>
                    </Row>

                    <Row class="bc1">
                      <Col span="8">
                      <span class="title">喜用神&nbsp;&nbsp;&nbsp;</span>
                      <span v-if="dataWanZheng.xiYongShen.length === 0" class="null">
                        未知
                      </span>
                      <span v-else>
                        <span v-for="index in dataWanZheng.xiYongShen.length" :key="index">
                          <span v-html="wxc(dataWanZheng.xiYongShen[index - 1])"></span>
                          <span v-if="index !== dataWanZheng.xiYongShen.length">、</span>
                        </span>
                      </span>
                      </Col>
                      <Col span="8">
                      <span class="title4">喜用神方位</span>
                      <span v-if="dataWanZheng.xiYongShenFangWei.length === 0" class="null">
                        未知
                      </span>
                      <span v-else>
                        <span v-for="index in dataWanZheng.xiYongShenFangWei.length" :key="index">
                          <span>{{ dataWanZheng.xiYongShenFangWei[index - 1] }}</span>
                          <span v-if="index !== dataWanZheng.xiYongShenFangWei.length">、</span>
                        </span>
                      </span>
                      </Col>
                      <Col span="8">
                      <span class="title2">五行缺失</span>
                      <span v-if="dataWanZheng.baZiWuXingQueShi[0] === '五行齐全'">五行齐全</span>
                      <span v-else>
                        <span v-for="index in dataWanZheng.baZiWuXingQueShi.length" :key="index">
                          缺<span v-html="wxc(dataWanZheng.baZiWuXingQueShi[index - 1])"></span>
                          <span v-if="index !== dataWanZheng.baZiWuXingQueShi.length">、</span>
                        </span>
                      </span>
                      </Col>
                    </Row>

                    <Row class="bc2">
                      <Col span="8">
                      <span class="title2">月相&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>{{ dataWanZheng.yueXiang }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title2">月将&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>{{ dataWanZheng.yueJiang }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title2">月将神&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>{{ dataWanZheng.yueJiangShen }}</span>
                      </Col>
                    </Row>

                    <Row class="bc1">
                      <Col span="8">
                      <span class="title">值日天神</span>
                      <span>{{ dataWanZheng.zhiDayTianShen }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">值时天神</span>
                      <span>{{ dataWanZheng.zhiHourTianShen }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">人元司令分野</span>
                      <span>{{ dataWanZheng.renYuan }}</span>
                      </Col>
                    </Row>

                    <Row class="bc2">
                      <Col span="8">
                      <span class="title">逐月胎神</span>
                      <span>{{ dataWanZheng.zhuMonthTaiShen }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title">逐日胎神</span>
                      <span>{{ dataWanZheng.zhuDayTaiShen }}</span>
                      </Col>
                      <Col span="8">
                      <span class="title"></span>
                      <span></span>
                      </Col>
                    </Row>
                  </div>

                  <Row>

                    <!-- 数据二 -->
                    <Col span="12">
                    <div class="jb2">

                      <div class="title">
                        五行数量
                      </div>

                      <div class="switch">
                        <span>包含藏干&nbsp;</span>
                        <el-switch v-model="cangGanWuXingSwitch" size="small" style="--el-switch-on-color:#13ce66;" />
                      </div>

                      <div class="divider">
                        <el-divider />
                      </div>

                      <Row>
                        <Col span="24">
                        <div class="progress">
                          <span class="title-p" v-html="wxc('木')"></span>
                          <Progress :percent="dataWanZheng.muCount * 10" :stroke-width="20" :stroke-color="muColor"
                            class="pro">
                            <span class="count">{{ dataWanZheng.muCount }}个</span>
                          </Progress>
                        </div>
                        </Col>
                        <Col span="24">
                        <div class="progress">
                          <span class="title-p" v-html="wxc('火')"></span>
                          <Progress :percent="dataWanZheng.huoCount * 10" :stroke-width="20" :stroke-color="huoColor"
                            class="pro">
                            <span class="count">{{ dataWanZheng.huoCount }}个</span>
                          </Progress>
                        </div>
                        </Col>
                        <Col span="24">
                        <div class="progress">
                          <span class="title-p" v-html="wxc('土')"></span>
                          <Progress :percent="dataWanZheng.tuCount * 10" :stroke-width="20" :stroke-color="tuColor"
                            class="pro">
                            <span class="count">{{ dataWanZheng.tuCount }}个</span>
                          </Progress>
                        </div>
                        </Col>
                        <Col span="24">
                        <div class="progress">
                          <span class="title-p" v-html="wxc('金')"></span>
                          <Progress :percent="dataWanZheng.jinCount * 10" :stroke-width="20" :stroke-color="jinColor"
                            class="pro">
                            <span class="count">{{ dataWanZheng.jinCount }}个</span>
                          </Progress>
                        </div>
                        </Col>
                        <Col span="24">
                        <div class="progress">
                          <span class="title-p" v-html="wxc('水')"></span>
                          <Progress :percent="dataWanZheng.shuiCount * 10" :stroke-width="20" :stroke-color="shuiColor"
                            class="pro">
                            <span class="count">{{ dataWanZheng.shuiCount }}个</span>
                          </Progress>
                        </div>
                        </Col>
                      </Row>

                    </div>
                    </Col>

                  </Row>

                  <!-- 数据四 -->
                  <div class="jb4">
                    <Row>
                      <Col span="4" class="average ml">
                      <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[0])"></span>
                      </Col>
                      <Col span="4" class="average">
                      <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[1])"></span>
                      </Col>
                      <Col span="4" class="average">
                      <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[2])"></span>
                      </Col>
                      <Col span="4" class="average">
                      <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[3])"></span>
                      </Col>
                      <Col span="4" class="average">
                      <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[4])"></span>
                      </Col>
                    </Row>
                  </div>

                  <!-- 数据五 -->
                  <div class="jb5">
                    <Row>
                        <Col span="24" class="mb ml">
                        <span class="title">天干关系（四柱）：</span>
                        <span v-if="dataWanZheng.tianGanLiuYi">
                          <span v-if="dataWanZheng.tianGanLiuYi.length !== 0" class="sp">
                            {{ dataWanZheng.tianGanLiuYi.join('，') }}
                          </span>
                          <span v-else class="null">暂无数据</span>
                        </span>
                        </Col>
                        <Col span="24" class="ml">
                        <span class="title">地支关系（四柱）：</span>
                        <span v-if="dataWanZheng.diZhiLiuYi">
                          <span v-if="dataWanZheng.diZhiLiuYi.length !== 0" class="sp">
                            {{ dataWanZheng.diZhiLiuYi.join('，') }}
                          </span>
                          <span v-else class="null">暂无数据</span>
                        </span>
                        </Col>
                      </Row>
                  </div>

                </div>

                <!-- 命盘信息 -->
                <div class="mingPan" v-show="dataWanZhengPage == 2">
                  <Row v-if="daYunLiuNianDataStatus">

                    <!-- 命盘 -->
                    <Col span="13">

                    <!-- 命盘模式1（四柱） -->
                    <div class="mp1" v-show="mingPanMode == 1">

                      <Row class="bc0">
                        <Col span="4" class="title">☯</Col>
                        <Col span="5" class="title">年柱</Col>
                        <Col span="5" class="title">月柱</Col>
                        <Col span="5" class="title">日柱</Col>
                        <Col span="5" class="title">时柱</Col>
                      </Row>

                      <Row class="bc2">
                        <Col span="4" class="title">主星</Col>
                        <Col span="5">{{ dataWanZheng.yearGanZhiZhuXing }}</Col>
                        <Col span="5">{{ dataWanZheng.monthGanZhiZhuXing }}</Col>
                        <Col span="5"><b>{{ dataWanZheng.dayGanZhiZhuXing }}</b></Col>
                        <Col span="5">{{ dataWanZheng.hourGanZhiZhuXing }}</Col>
                      </Row>

                      <Row class="bc3">
                        <Col span="4" class="title">天干</Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                        <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                        <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                        <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                        <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                        </Col>
                      </Row>

                      <Row class="bc4">
                        <Col span="4" class="title">地支</Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.yearZhi)"></b>
                        <span v-html="gzwx(dataWanZheng.yearZhi)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.monthZhi)"></b>
                        <span v-html="gzwx(dataWanZheng.monthZhi)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.dayZhi)"></b>
                        <span v-html="gzwx(dataWanZheng.dayZhi)"></span>
                        </Col>
                        <Col span="5">
                        <b v-html="gzgl(dataWanZheng.hourZhi)"></b>
                        <span v-html="gzwx(dataWanZheng.hourZhi)"></span>
                        </Col>
                      </Row>

                      <Row class="bc5">
                        <Col span="4" class="title2">藏干</Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.yearZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataWanZheng.yearZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataWanZheng.yearZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.monthZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataWanZheng.monthZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataWanZheng.monthZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.dayZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataWanZheng.dayZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataWanZheng.dayZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.hourZhiCangGan.length" :key="index">
                          <span v-html="cggl(dataWanZheng.hourZhiCangGan[index - 1])"></span>
                          <span v-html="gzwx(dataWanZheng.hourZhiCangGan[index - 1])"></span><br />
                        </span>
                        </Col>
                      </Row>

                      <Row class="bc6">
                        <Col span="4" class="title2">副星</Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.yearGanZhiFuXing.length" :key="index">
                          {{ dataWanZheng.yearGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.monthGanZhiFuXing.length" :key="index">
                          {{ dataWanZheng.monthGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.dayGanZhiFuXing.length" :key="index">
                          {{ dataWanZheng.dayGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                        <Col span="5">
                        <span v-for="index in dataWanZheng.hourGanZhiFuXing.length" :key="index">
                          {{ dataWanZheng.hourGanZhiFuXing[index - 1] }} <br />
                        </span>
                        </Col>
                      </Row>

                      <Row class="bc1">
                        <Col span="4" class="title">地势</Col>
                        <Col span="5">{{ dataWanZheng.yearGanZhiDiShi }}</Col>
                        <Col span="5">{{ dataWanZheng.monthGanZhiDiShi }}</Col>
                        <Col span="5">{{ dataWanZheng.dayGanZhiDiShi }}</Col>
                        <Col span="5">{{ dataWanZheng.hourGanZhiDiShi }}</Col>
                      </Row>

                      <Row class="bc2">
                        <Col span="4" class="title">空亡</Col>
                        <Col span="5">{{ dataWanZheng.yearGanZhiKongWang }}</Col>
                        <Col span="5">{{ dataWanZheng.monthGanZhiKongWang }}</Col>
                        <Col span="5">{{ dataWanZheng.dayGanZhiKongWang }}</Col>
                        <Col span="5">{{ dataWanZheng.hourGanZhiKongWang }}</Col>
                      </Row>

                      <Row class="bc1">
                        <Col span="4" class="title">纳音</Col>
                        <Col span="5">{{ dataWanZheng.yearGanZhiNaYin }}</Col>
                        <Col span="5">{{ dataWanZheng.monthGanZhiNaYin }}</Col>
                        <Col span="5">{{ dataWanZheng.dayGanZhiNaYin }}</Col>
                        <Col span="5">{{ dataWanZheng.hourGanZhiNaYin }}</Col>
                      </Row>

                      <Row class="bc7">
                        <Col span="4" class="title ml">
                        神煞<el-tooltip class="box-item" effect="dark" placement="top">
                          <template #content>
                            此处只显示部分常用神煞
                          </template>
                          <Icon type="md-help-circle" />
                        </el-tooltip>
                        </Col>
                        <Col span="5">
                        <div v-if="dataWanZheng.yearGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.yearGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.yearGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.yearGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        </Col>
                        <Col span="5">
                        <div v-if="dataWanZheng.monthGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.monthGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.monthGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.monthGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        </Col>
                        <Col span="5">
                        <div v-if="dataWanZheng.dayGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.dayGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.dayGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.dayGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        </Col>
                        <Col span="5">
                        <div v-if="dataWanZheng.hourGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.hourGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.hourGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.hourGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        </Col>
                      </Row>
                    </div>

                    <!-- 命盘模式2（四柱+大运、流年） -->
                    <div class="mp2" v-show="mingPanMode == 2">

                      <Row class="bc0">
                        <div class="title">☯</div>
                        <div>年柱</div>
                        <div>月柱</div>
                        <div>日柱</div>
                        <div>时柱</div>
                        <div v-show="daYunLun !== 1">
                          <b>大运</b>
                        </div>
                        <div v-show="daYunLun === 1">
                          <b>小运</b>
                        </div>
                        <div><b>流年</b></div>
                      </Row>

                      <Row class="bc2">
                        <div class="title">主星</div>
                        <div>{{ dataWanZheng.yearGanZhiZhuXing }}</div>
                        <div>{{ dataWanZheng.monthGanZhiZhuXing }}</div>
                        <div><b>{{ dataWanZheng.dayGanZhiZhuXing }}</b></div>
                        <div>{{ dataWanZheng.hourGanZhiZhuXing }}</div>
                        <div>{{ daYunMingPanData.daYunZhuXing }}</div>
                        <div>{{ liuNianMingPanData.liuNianZhuXing }}</div>
                      </Row>

                      <Row class="bc3">
                        <div class="title">天干</div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                          <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                          <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                          <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                          <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                        </div>
                        <div v-if="daYunMingPanData.daYunGanZhi">
                          <b v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(daYunMingPanData.daYunGanZhi.substring(0, 1))"></span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianGanZhi">
                          <b v-html="gzgl(liuNianMingPanData.liuNianGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(liuNianMingPanData.liuNianGanZhi.substring(0, 1))"></span>
                        </div>
                      </Row>

                      <Row class="bc4">
                        <div class="title">地支</div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.yearZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.yearZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.monthZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.monthZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.dayZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.dayZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.hourZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.hourZhi)" class="wuxing"></span>
                        </div>
                        <div v-if="daYunMingPanData.daYunGanZhi">
                          <strong v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(daYunMingPanData.daYunGanZhi.substring(1, 2))" class="wuxing"></span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianGanZhi">
                          <strong v-html="gzgl(liuNianMingPanData.liuNianGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(liuNianMingPanData.liuNianGanZhi.substring(1, 2))" class="wuxing"></span>
                        </div>
                      </Row>

                      <Row class="bc5">
                        <div class="title2">藏干</div>
                        <div v-if="dataWanZheng.yearZhiCangGan">
                          <span v-for="index in dataWanZheng.yearZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.yearZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.yearZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.monthZhiCangGan">
                          <span v-for="index in dataWanZheng.monthZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.monthZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.monthZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.dayZhiCangGan">
                          <span v-for="index in dataWanZheng.dayZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.dayZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.dayZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.hourZhiCangGan">
                          <span v-for="index in dataWanZheng.hourZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.hourZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.hourZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="daYunMingPanData.daYunCangGan">
                          <span v-for="index in daYunMingPanData.daYunCangGan.length" :key="index">
                            <span v-html="cggl(daYunMingPanData.daYunCangGan[index - 1])"></span>
                            <span v-html="gzwx(daYunMingPanData.daYunCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianCangGan">
                          <span v-for="index in liuNianMingPanData.liuNianCangGan.length" :key="index">
                            <span v-html="cggl(liuNianMingPanData.liuNianCangGan[index - 1])"></span>
                            <span v-html="gzwx(liuNianMingPanData.liuNianCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                      </Row>

                      <Row class="bc6">
                        <div class="title2">副星</div>
                        <div v-if="dataWanZheng.yearGanZhiFuXing">
                          <span v-for="index in dataWanZheng.yearGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.yearGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.monthGanZhiFuXing">
                          <span v-for="index in dataWanZheng.monthGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.monthGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.dayGanZhiFuXing">
                          <span v-for="index in dataWanZheng.dayGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.dayGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.hourGanZhiFuXing">
                          <span v-for="index in dataWanZheng.hourGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.hourGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="daYunMingPanData.daYunFuXing">
                          <span v-for="index in daYunMingPanData.daYunFuXing.length" :key="index">
                            {{ daYunMingPanData.daYunFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianFuXing">
                          <span v-for="index in liuNianMingPanData.liuNianFuXing.length" :key="index">
                            {{ liuNianMingPanData.liuNianFuXing[index - 1] }} <br />
                          </span>
                        </div>
                      </Row>

                      <Row class="bc1">
                        <div class="title">地势</div>
                        <div>{{ dataWanZheng.yearGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.monthGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.dayGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.hourGanZhiDiShi }}</div>
                        <div>{{ daYunMingPanData.daYunDiShi }}</div>
                        <div>{{ liuNianMingPanData.liuNianDiShi }}</div>
                      </Row>

                      <Row class="bc2">
                        <div class="title">空亡</div>
                        <div>{{ dataWanZheng.yearGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.monthGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.dayGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.hourGanZhiKongWang }}</div>
                        <div>{{ daYunMingPanData.daYunKongWang }}</div>
                        <div>{{ liuNianMingPanData.liuNianKongWang }}</div>
                      </Row>

                      <Row class="bc1">
                        <div class="title">纳音</div>
                        <div>{{ dataWanZheng.yearGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.monthGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.dayGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.hourGanZhiNaYin }}</div>
                        <div>{{ daYunMingPanData.daYunNaYin }}</div>
                        <div>{{ liuNianMingPanData.liuNianNaYin }}</div>
                      </Row>

                      <Row class="bc7">
                        <div class="title ml">
                          神煞<el-tooltip class="box-item" effect="dark" placement="top">
                            <template #content>
                              此处只显示部分常用神煞
                            </template>
                            <Icon type="md-help-circle" />
                          </el-tooltip>
                        </div>
                        <div v-if="dataWanZheng.yearGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.yearGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.yearGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.yearGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.monthGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.monthGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.monthGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.monthGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.dayGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.dayGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.dayGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.dayGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.hourGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.hourGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.hourGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.hourGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="daYunMingPanData.daYunShenSha" class="ss">
                          <span v-if="daYunMingPanData.daYunShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in daYunMingPanData.daYunShenSha.length" :key="index">
                            <p>{{ daYunMingPanData.daYunShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="liuNianMingPanData.liuNianShenSha" class="ss">
                          <span v-if="liuNianMingPanData.liuNianShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in liuNianMingPanData.liuNianShenSha.length" :key="index">
                            <p>{{ liuNianMingPanData.liuNianShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                      </Row>

                    </div>

                    <!-- 命盘模式3（四柱+大运、流年、流月） -->
                    <div class="mp3" v-show="mingPanMode == 3">

                      <Row class="bc0">
                        <div class="title">☯</div>
                        <div>年柱</div>
                        <div>月柱</div>
                        <div>日柱</div>
                        <div>时柱</div>
                        <div v-show="daYunLun !== 1">
                          <b>大运</b>
                        </div>
                        <div v-show="daYunLun === 1">
                          <b>小运</b>
                        </div>
                        <div><b>流年</b></div>
                        <div><b>流月</b></div>
                      </Row>

                      <Row class="bc2">
                        <div class="title">主星</div>
                        <div>{{ dataWanZheng.yearGanZhiZhuXing }}</div>
                        <div>{{ dataWanZheng.monthGanZhiZhuXing }}</div>
                        <div><b>{{ dataWanZheng.dayGanZhiZhuXing }}</b></div>
                        <div>{{ dataWanZheng.hourGanZhiZhuXing }}</div>
                        <div>{{ daYunMingPanData.daYunZhuXing }}</div>
                        <div>{{ liuNianMingPanData.liuNianZhuXing }}</div>
                        <div>{{ liuYueMingPanData.liuYueZhuXing }}</div>
                      </Row>

                      <Row class="bc3">
                        <div class="title">天干</div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                          <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                          <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                          <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                          <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                        </div>
                        <div v-if="daYunMingPanData.daYunGanZhi">
                          <b v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(daYunMingPanData.daYunGanZhi.substring(0, 1))"></span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianGanZhi">
                          <b v-html="gzgl(liuNianMingPanData.liuNianGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(liuNianMingPanData.liuNianGanZhi.substring(0, 1))"></span>
                        </div>
                        <div v-if="liuYueMingPanData.liuYueGanZhi">
                          <b v-html="gzgl(liuYueMingPanData.liuYueGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(liuYueMingPanData.liuYueGanZhi.substring(0, 1))"></span>
                        </div>
                      </Row>

                      <Row class="bc4">
                        <div class="title">地支</div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.yearZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.yearZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.monthZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.monthZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.dayZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.dayZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.hourZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.hourZhi)" class="wuxing"></span>
                        </div>
                        <div v-if="daYunMingPanData.daYunGanZhi">
                          <strong v-html="gzgl(daYunMingPanData.daYunGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(daYunMingPanData.daYunGanZhi.substring(1, 2))" class="wuxing"></span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianGanZhi">
                          <strong v-html="gzgl(liuNianMingPanData.liuNianGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(liuNianMingPanData.liuNianGanZhi.substring(1, 2))" class="wuxing"></span>
                        </div>
                        <div v-if="liuYueMingPanData.liuYueGanZhi">
                          <strong v-html="gzgl(liuYueMingPanData.liuYueGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(liuYueMingPanData.liuYueGanZhi.substring(1, 2))" class="wuxing"></span>
                        </div>
                      </Row>

                      <Row class="bc5">
                        <div class="title2">藏干</div>
                        <div v-if="dataWanZheng.yearZhiCangGan">
                          <span v-for="index in dataWanZheng.yearZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.yearZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.yearZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.monthZhiCangGan">
                          <span v-for="index in dataWanZheng.monthZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.monthZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.monthZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.dayZhiCangGan">
                          <span v-for="index in dataWanZheng.dayZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.dayZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.dayZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.hourZhiCangGan">
                          <span v-for="index in dataWanZheng.hourZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.hourZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.hourZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="daYunMingPanData.daYunCangGan">
                          <span v-for="index in daYunMingPanData.daYunCangGan.length" :key="index">
                            <span v-html="cggl(daYunMingPanData.daYunCangGan[index - 1])"></span>
                            <span v-html="gzwx(daYunMingPanData.daYunCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianCangGan">
                          <span v-for="index in liuNianMingPanData.liuNianCangGan.length" :key="index">
                            <span v-html="cggl(liuNianMingPanData.liuNianCangGan[index - 1])"></span>
                            <span v-html="gzwx(liuNianMingPanData.liuNianCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="liuYueMingPanData.liuYueCangGan">
                          <span v-for="index in liuYueMingPanData.liuYueCangGan.length" :key="index">
                            <span v-html="cggl(liuYueMingPanData.liuYueCangGan[index - 1])"></span>
                            <span v-html="gzwx(liuYueMingPanData.liuYueCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                      </Row>

                      <Row class="bc6">
                        <div class="title2">副星</div>
                        <div v-if="dataWanZheng.yearGanZhiFuXing">
                          <span v-for="index in dataWanZheng.yearGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.yearGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.monthGanZhiFuXing">
                          <span v-for="index in dataWanZheng.monthGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.monthGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.dayGanZhiFuXing">
                          <span v-for="index in dataWanZheng.dayGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.dayGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.hourGanZhiFuXing">
                          <span v-for="index in dataWanZheng.hourGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.hourGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="daYunMingPanData.daYunFuXing">
                          <span v-for="index in daYunMingPanData.daYunFuXing.length" :key="index">
                            {{ daYunMingPanData.daYunFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="liuNianMingPanData.liuNianFuXing">
                          <span v-for="index in liuNianMingPanData.liuNianFuXing.length" :key="index">
                            {{ liuNianMingPanData.liuNianFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="liuYueMingPanData.liuYueFuXing">
                          <span v-for="index in liuYueMingPanData.liuYueFuXing.length" :key="index">
                            {{ liuYueMingPanData.liuYueFuXing[index - 1] }} <br />
                          </span>
                        </div>
                      </Row>

                      <Row class="bc1">
                        <div class="title">地势</div>
                        <div>{{ dataWanZheng.yearGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.monthGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.dayGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.hourGanZhiDiShi }}</div>
                        <div>{{ daYunMingPanData.daYunDiShi }}</div>
                        <div>{{ liuNianMingPanData.liuNianDiShi }}</div>
                        <div>{{ liuYueMingPanData.liuYueDiShi }}</div>
                      </Row>

                      <Row class="bc2">
                        <div class="title">空亡</div>
                        <div>{{ dataWanZheng.yearGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.monthGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.dayGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.hourGanZhiKongWang }}</div>
                        <div>{{ daYunMingPanData.daYunKongWang }}</div>
                        <div>{{ liuNianMingPanData.liuNianKongWang }}</div>
                        <div>{{ liuYueMingPanData.liuYueKongWang }}</div>
                      </Row>

                      <Row class="bc1">
                        <div class="title">纳音</div>
                        <div>{{ dataWanZheng.yearGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.monthGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.dayGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.hourGanZhiNaYin }}</div>
                        <div>{{ daYunMingPanData.daYunNaYin }}</div>
                        <div>{{ liuNianMingPanData.liuNianNaYin }}</div>
                        <div>{{ liuYueMingPanData.liuYueNaYin }}</div>
                      </Row>

                      <Row class="bc7">
                        <div class="title ml">
                          神煞<el-tooltip class="box-item" effect="dark" placement="top">
                            <template #content>
                              此处只显示部分常用神煞
                            </template>
                            <Icon type="md-help-circle" />
                          </el-tooltip>
                        </div>
                        <div v-if="dataWanZheng.yearGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.yearGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.yearGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.yearGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.monthGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.monthGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.monthGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.monthGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.dayGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.dayGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.dayGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.dayGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.hourGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.hourGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.hourGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.hourGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="daYunMingPanData.daYunShenSha" class="ss">
                          <span v-if="daYunMingPanData.daYunShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in daYunMingPanData.daYunShenSha.length" :key="index">
                            <p>{{ daYunMingPanData.daYunShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="liuNianMingPanData.liuNianShenSha" class="ss">
                          <span v-if="liuNianMingPanData.liuNianShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in liuNianMingPanData.liuNianShenSha.length" :key="index">
                            <p>{{ liuNianMingPanData.liuNianShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="liuYueMingPanData.liuYueShenSha" class="ss">
                          <span v-if="liuYueMingPanData.liuYueShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in liuYueMingPanData.liuYueShenSha.length" :key="index">
                            <p>{{ liuYueMingPanData.liuYueShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                      </Row>

                    </div>

                    <!-- 命盘模式4（四柱+胎元、胎息、命宫、身宫） -->
                    <div class="mp4" v-show="mingPanMode == 4">

                      <Row class="bc0">
                        <div class="title">☯</div>
                        <div>年柱</div>
                        <div>月柱</div>
                        <div>日柱</div>
                        <div>时柱</div>
                        <div><b>胎元</b></div>
                        <div><b>胎息</b></div>
                        <div><b>命宫</b></div>
                        <div><b>身宫</b></div>
                      </Row>

                      <Row class="bc2">
                        <div class="title">主星</div>
                        <div>{{ dataWanZheng.yearGanZhiZhuXing }}</div>
                        <div>{{ dataWanZheng.monthGanZhiZhuXing }}</div>
                        <div><b>{{ dataWanZheng.dayGanZhiZhuXing }}</b></div>
                        <div>{{ dataWanZheng.hourGanZhiZhuXing }}</div>
                        <div>{{ taiMingShenMingPanData.taiYuanZhuXing }}</div>
                        <div>{{ taiMingShenMingPanData.taiXiZhuXing }}</div>
                        <div>{{ taiMingShenMingPanData.mingGongZhuXing }}</div>
                        <div>{{ taiMingShenMingPanData.shenGongZhuXing }}</div>
                      </Row>

                      <Row class="bc3">
                        <div class="title">天干</div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.yearGan)"></b>
                          <span v-html="gzwx(dataWanZheng.yearGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.monthGan)"></b>
                          <span v-html="gzwx(dataWanZheng.monthGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.dayGan)"></b>
                          <span v-html="gzwx(dataWanZheng.dayGan)"></span>
                        </div>
                        <div>
                          <b v-html="gzgl(dataWanZheng.hourGan)"></b>
                          <span v-html="gzwx(dataWanZheng.hourGan)"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.taiYuanGanZhi">
                          <b v-html="gzgl(taiMingShenMingPanData.taiYuanGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(taiMingShenMingPanData.taiYuanGanZhi.substring(0, 1))"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.taiXiGanZhi">
                          <b v-html="gzgl(taiMingShenMingPanData.taiXiGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(taiMingShenMingPanData.taiXiGanZhi.substring(0, 1))"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.mingGongGanZhi">
                          <b v-html="gzgl(taiMingShenMingPanData.mingGongGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(taiMingShenMingPanData.mingGongGanZhi.substring(0, 1))"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.shenGongGanZhi">
                          <b v-html="gzgl(taiMingShenMingPanData.shenGongGanZhi.substring(0, 1))"></b>
                          <span v-html="gzwx(taiMingShenMingPanData.shenGongGanZhi.substring(0, 1))"></span>
                        </div>
                      </Row>

                      <Row class="bc4">
                        <div class="title">地支</div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.yearZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.yearZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.monthZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.monthZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.dayZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.dayZhi)" class="wuxing"></span>
                        </div>
                        <div>
                          <strong v-html="gzgl(dataWanZheng.hourZhi)"></strong>
                          <span v-html="gzwx(dataWanZheng.hourZhi)" class="wuxing"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.taiYuanGanZhi">
                          <strong v-html="gzgl(taiMingShenMingPanData.taiYuanGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(taiMingShenMingPanData.taiYuanGanZhi.substring(1, 2))"
                            class="wuxing"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.taiXiGanZhi">
                          <strong v-html="gzgl(taiMingShenMingPanData.taiXiGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(taiMingShenMingPanData.taiXiGanZhi.substring(1, 2))" class="wuxing"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.mingGongGanZhi">
                          <strong v-html="gzgl(taiMingShenMingPanData.mingGongGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(taiMingShenMingPanData.mingGongGanZhi.substring(1, 2))"
                            class="wuxing"></span>
                        </div>
                        <div v-if="taiMingShenMingPanData.shenGongGanZhi">
                          <strong v-html="gzgl(taiMingShenMingPanData.shenGongGanZhi.substring(1, 2))"></strong>
                          <span v-html="gzwx(taiMingShenMingPanData.shenGongGanZhi.substring(1, 2))"
                            class="wuxing"></span>
                        </div>
                      </Row>

                      <Row class="bc5">
                        <div class="title2">藏干</div>
                        <div v-if="dataWanZheng.yearZhiCangGan">
                          <span v-for="index in dataWanZheng.yearZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.yearZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.yearZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.monthZhiCangGan">
                          <span v-for="index in dataWanZheng.monthZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.monthZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.monthZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.dayZhiCangGan">
                          <span v-for="index in dataWanZheng.dayZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.dayZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.dayZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="null !== dataWanZheng.hourZhiCangGan">
                          <span v-for="index in dataWanZheng.hourZhiCangGan.length" :key="index">
                            <span v-html="cggl(dataWanZheng.hourZhiCangGan[index - 1])"></span>
                            <span v-html="gzwx(dataWanZheng.hourZhiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-else></div>
                        <div v-if="taiMingShenMingPanData.taiYuanCangGan">
                          <span v-for="index in taiMingShenMingPanData.taiYuanCangGan.length" :key="index">
                            <span v-html="cggl(taiMingShenMingPanData.taiYuanCangGan[index - 1])"></span>
                            <span v-html="gzwx(taiMingShenMingPanData.taiYuanCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="taiMingShenMingPanData.taiXiCangGan">
                          <span v-for="index in taiMingShenMingPanData.taiXiCangGan.length" :key="index">
                            <span v-html="cggl(taiMingShenMingPanData.taiXiCangGan[index - 1])"></span>
                            <span v-html="gzwx(taiMingShenMingPanData.taiXiCangGan[index - 1])"></span> <br />
                          </span>
                        </div>
                        <div v-if="taiMingShenMingPanData.mingGongCangGan">
                          <span v-for="index in taiMingShenMingPanData.mingGongCangGan.length" :key="index">
                            <span v-html="cggl(taiMingShenMingPanData.mingGongCangGan[index - 1])"></span>
                            <span v-html="gzwx(taiMingShenMingPanData.mingGongCangGan[index - 1])"></span><br />
                          </span>
                        </div>
                        <div v-if="taiMingShenMingPanData.shenGongCangGan">
                          <span v-for="index in taiMingShenMingPanData.shenGongCangGan.length" :key="index">
                            <span v-html="cggl(taiMingShenMingPanData.shenGongCangGan[index - 1])"></span>
                            <span v-html="gzwx(taiMingShenMingPanData.shenGongCangGan[index - 1])"></span><br />
                          </span>
                        </div>
                      </Row>

                      <Row class="bc6">
                        <div class="title2">副星</div>
                        <div v-if="dataWanZheng.yearGanZhiFuXing">
                          <span v-for="index in dataWanZheng.yearGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.yearGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.monthGanZhiFuXing">
                          <span v-for="index in dataWanZheng.monthGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.monthGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="dataWanZheng.dayGanZhiFuXing">
                          <span v-for="index in dataWanZheng.dayGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.dayGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="null !== dataWanZheng.hourGanZhiFuXing">
                          <span v-for="index in dataWanZheng.hourGanZhiFuXing.length" :key="index">
                            {{ dataWanZheng.hourGanZhiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-else></div>
                        <div v-if="taiMingShenMingPanData.taiYuanFuXing">
                          <span v-for="index in taiMingShenMingPanData.taiYuanFuXing.length" :key="index">
                            {{ taiMingShenMingPanData.taiYuanFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="taiMingShenMingPanData.taiXiFuXing">
                          <span v-for="index in taiMingShenMingPanData.taiXiFuXing.length" :key="index">
                            {{ taiMingShenMingPanData.taiXiFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="taiMingShenMingPanData.mingGongFuXing">
                          <span v-for="index in taiMingShenMingPanData.mingGongFuXing.length" :key="index">
                            {{ taiMingShenMingPanData.mingGongFuXing[index - 1] }} <br />
                          </span>
                        </div>
                        <div v-if="taiMingShenMingPanData.shenGongFuXing">
                          <span v-for="index in taiMingShenMingPanData.shenGongFuXing.length" :key="index">
                            {{ taiMingShenMingPanData.shenGongFuXing[index - 1] }} <br />
                          </span>
                        </div>
                      </Row>

                      <Row class="bc1">
                        <div class="title">地势</div>
                        <div>{{ dataWanZheng.yearGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.monthGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.dayGanZhiDiShi }}</div>
                        <div>{{ dataWanZheng.hourGanZhiDiShi }}</div>
                        <div>{{ taiMingShenMingPanData.taiYuanDiShi }}</div>
                        <div>{{ taiMingShenMingPanData.taiXiDiShi }}</div>
                        <div>{{ taiMingShenMingPanData.mingGongDiShi }}</div>
                        <div>{{ taiMingShenMingPanData.shenGongDiShi }}</div>
                      </Row>

                      <Row class="bc2">
                        <div class="title">空亡</div>
                        <div>{{ dataWanZheng.yearGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.monthGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.dayGanZhiKongWang }}</div>
                        <div>{{ dataWanZheng.hourGanZhiKongWang }}</div>
                        <div>{{ taiMingShenMingPanData.taiYuanKongWang }}</div>
                        <div>{{ taiMingShenMingPanData.taiXiKongWang }}</div>
                        <div>{{ taiMingShenMingPanData.mingGongKongWang }}</div>
                        <div>{{ taiMingShenMingPanData.shenGongKongWang }}</div>
                      </Row>

                      <Row class="bc1">
                        <div class="title">纳音</div>
                        <div>{{ dataWanZheng.yearGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.monthGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.dayGanZhiNaYin }}</div>
                        <div>{{ dataWanZheng.hourGanZhiNaYin }}</div>
                        <div>{{ taiMingShenMingPanData.taiYuanNaYin }}</div>
                        <div>{{ taiMingShenMingPanData.taiXiNaYin }}</div>
                        <div>{{ taiMingShenMingPanData.mingGongNaYin }}</div>
                        <div>{{ taiMingShenMingPanData.shenGongNaYin }}</div>
                      </Row>

                      <Row class="bc7">
                        <div class="title ml">
                          神煞<el-tooltip class="box-item" effect="dark" placement="top">
                            <template #content>
                              此处只显示部分常用神煞
                            </template>
                            <Icon type="md-help-circle" />
                          </el-tooltip>
                        </div>
                        <div v-if="dataWanZheng.yearGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.yearGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.yearGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.yearGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.monthGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.monthGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.monthGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.monthGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="dataWanZheng.dayGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.dayGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.dayGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.dayGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="null !== dataWanZheng.hourGanZhiShenSha" class="ss">
                          <span v-if="dataWanZheng.hourGanZhiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in dataWanZheng.hourGanZhiShenSha.length" :key="index">
                            <p>{{ dataWanZheng.hourGanZhiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-else></div>
                        <div v-if="taiMingShenMingPanData.taiYuanShenSha" class="ss">
                          <span v-if="taiMingShenMingPanData.taiYuanShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in taiMingShenMingPanData.taiYuanShenSha.length" :key="index">
                            <p>{{ taiMingShenMingPanData.taiYuanShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="taiMingShenMingPanData.taiXiShenSha" class="ss">
                          <span v-if="taiMingShenMingPanData.taiXiShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in taiMingShenMingPanData.taiXiShenSha.length" :key="index">
                            <p>{{ taiMingShenMingPanData.taiXiShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="taiMingShenMingPanData.mingGongShenSha" class="ss">
                          <span v-if="taiMingShenMingPanData.mingGongShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in taiMingShenMingPanData.mingGongShenSha.length" :key="index">
                            <p>{{ taiMingShenMingPanData.mingGongShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                        <div v-if="taiMingShenMingPanData.shenGongShenSha" class="ss">
                          <span v-if="taiMingShenMingPanData.shenGongShenSha.length === 0">&nbsp;</span>
                          <span v-else v-for="index in taiMingShenMingPanData.shenGongShenSha.length" :key="index">
                            <p>{{ taiMingShenMingPanData.shenGongShenSha[index - 1] }}</p>
                          </span>
                          <br />
                        </div>
                      </Row>
                    </div>

                    </Col>

                    <!-- 大运流年、五行旺衰、干支关系 -->
                    <Col span="11">
                    <div class="dyln">

                      <!-- 起运数据 -->
                      <div class="qy">
                        <span class="title" style="float:left;">起运：</span>
                        <Ellipsis :text="dataWanZheng.qiYun" :length="16" tooltip />
                        <!-- <span class="title">起运：</span>{{ dataWanZheng.qiYun }} -->
                        <span class="title">起运日期：</span>{{ dataWanZheng.qiYunDate }}
                        <div class="mingPanMode">
                          <el-segmented class="segmented" v-model="mingPanModeStr" :options="mingPanModeOptions" />
                        </div>
                      </div>

                      <!-- 大运 -->
                      <div class="dy" v-if="daYunData">
                        <div class="title"><b>大<br />运</b></div>
                        <el-card shadow="never" class="dy-card">
                          <div class="dy-d">
                            <div v-for="index in daYunLunSet" :key="index" class="bd-l">

                              <span v-if="daYunLun === index">
                                <div class="div-yes size">
                                  <span v-if="index === 1">
                                    <b v-if="daYunData[0][1] !== daYunData[1][1]">
                                      1~{{ parseInt(daYunData[1][1]) - 1 }}岁
                                    </b>
                                    <b v-else> {{ daYunData[index - 1][1] }}岁 </b>
                                  </span>
                                  <span v-else>
                                    <b> {{ daYunData[index - 1][1] }}岁 </b>
                                  </span>
                                </div>
                                <div class="div-yes size">
                                  <b> {{ daYunData[index - 1][0] }}年 </b>
                                </div>
                                <span v-if="index === 1">
                                  <div class="xiaoYun-yes">
                                    <b>小运</b>
                                  </div>

                                  <!--
                                    <b>
                                    <div class="div-no shiShen1">{{ xiaoYunDataFirst[liuNianXiaoYunLun - 1][3] }}</div>
                                    </b>
                                    <b>
                                      <div class="div-no shiShen2">{{ xiaoYunDataFirst[liuNianXiaoYunLun - 1][4] }}</div>
                                    </b>
                                    -->

                                </span>
                                <span v-else>
                                  <b>
                                    <div class="div-yes" v-html="bzc(daYunData[index - 1][2])"></div>
                                  </b>
                                  <b>
                                    <div class="div-yes shiShen1">{{ daYunData[index - 1][3] }}</div>
                                  </b>
                                  <b>
                                    <div class="div-yes shiShen2">{{ daYunData[index - 1][4] }}</div>
                                  </b>
                                </span>
                              </span>

                              <span v-else
                                @click="daYunQieHuanMethod(index, daYunData[index - 1][2], daYunData[index - 1][0])">
                                <div class="div-no size">
                                  <span v-if="index === 1">
                                    <span v-if="daYunData[0][1] !== daYunData[1][1]">
                                      1~{{ parseInt(daYunData[1][1]) - 1 }}岁
                                    </span>
                                    <span v-else>{{ daYunData[index - 1][1] }}岁</span>
                                  </span>
                                  <span v-else> {{ daYunData[index - 1][1] }}岁</span>
                                </div>
                                <div class="div-no size">{{ daYunData[index - 1][0] }}年</div>
                                <span v-if="index === 1">
                                  <div class="xiaoYun-no">
                                    <b>小运</b>
                                  </div>

                                  <!--
                                    <div class="div-no shiShen1">{{ xiaoYunDataFirst[liuNianXiaoYunLun - 1][3] }}</div>
                                    <div class="div-no shiShen2">{{ xiaoYunDataFirst[liuNianXiaoYunLun - 1][4] }}</div>
                                  -->

                                </span>
                                <span v-else>
                                  <div class="div-no" v-html="bzc(daYunData[index - 1][2])"></div>
                                  <div class="div-no shiShen1">{{ daYunData[index - 1][3] }}</div>
                                  <div class="div-no shiShen2">{{ daYunData[index - 1][4] }}</div>
                                </span>
                              </span>

                            </div>
                          </div>
                        </el-card>
                      </div>

                      <!-- 流年 -->
                      <div class="ln" v-if="liuNianData">
                        <div class="title"><b>流<br />年</b></div>
                        <div v-for="index in liuNianData.length" :key="index" class="bd-l">
                          <span v-if="liuNianXiaoYunLun === index">
                            <div class="div-yes size">
                              <b>{{ liuNianData[index - 1][1] }}岁</b>
                            </div>
                            <div class="div-yes size">
                              <b>{{ liuNianData[index - 1][0] }}年</b>
                            </div>
                            <b>
                              <div class="div-yes" v-html="bzc(liuNianData[index - 1][2])"></div>
                            </b>
                            <b>
                              <div class="div-yes shiShen1">{{ liuNianData[index - 1][3] }}</div>
                            </b>
                            <b>
                              <div class="div-yes shiShen2">{{ liuNianData[index - 1][4] }}</div>
                            </b>
                          </span>
                          <span v-else
                            @click="liuNianXiaoYunQieHuanMethod(index, liuNianData[index - 1][0], liuNianData[index - 1][2])">
                            <div class="div-no size">{{ liuNianData[index - 1][1] }}岁</div>
                            <div class="div-no size">{{ liuNianData[index - 1][0] }}年</div>
                            <div class="div-no" v-html="bzc(liuNianData[index - 1][2])"></div>
                            <div class="div-no shiShen1">{{ liuNianData[index - 1][3] }}</div>
                            <div class="div-no shiShen2">{{ liuNianData[index - 1][4] }}</div>
                          </span>
                        </div>
                      </div>

                      <!-- 流年 - 空 -->
                      <div class="ln" v-else>
                        <div class="title"><b>流<br />年</b></div>
                        <div v-for="index in 10" :key="index" class="bd-l">
                          <div class="null">- -</div>
                        </div>
                      </div>

                      <!-- 小运 -->
                      <div class="xy" v-if="xiaoYunData">
                        <div class="title"><b> 小<br />运 </b></div>
                        <div v-for="index in xiaoYunData.length" :key="index" class="bd-l">
                          <span v-if="xiaoYunData.length !== 0">
                            <span v-if="liuNianXiaoYunLun === index">
                              <b>
                                <div class="div-yes" v-html="bzc(xiaoYunData[index - 1][2])"></div>
                              </b>
                              <b>
                                <div class="div-yes shiShen1">{{ xiaoYunData[index - 1][3] }}</div>
                              </b>
                              <b>
                                <div class="div-yes shiShen2">{{ xiaoYunData[index - 1][4] }}</div>
                              </b>
                            </span>
                            <span v-else
                              @click="liuNianXiaoYunQieHuanMethod(index, liuNianData[index - 1][0], liuNianData[index - 1][2])">
                              <div class="div-no" v-html="bzc(xiaoYunData[index - 1][2])"></div>
                              <div class="div-no shiShen1">{{ xiaoYunData[index - 1][3] }}</div>
                              <div class="div-no shiShen2">{{ xiaoYunData[index - 1][4] }}</div>
                            </span>
                          </span>
                          <span v-else>
                            <div class="div"></div>
                            <div class="div"></div>
                            <div class="div"></div>
                          </span>
                        </div>
                      </div>

                      <!-- 小运 - 空 -->
                      <div class="xy" v-else>
                        <div class="title"><b>小<br />运</b></div>
                        <div v-for="index in 10" :key="index" class="bd-l">
                          <div class="null">- -</div>
                        </div>
                      </div>

                      <!-- 流月 -->
                      <div class="ly" v-if="liuYueData">
                        <div class="title"><b>流<br />月</b></div>
                        <div v-for="index in liuYueData.length" :key="index" class="bd-l">
                          <span v-if="liuYueLun === index">
                            <div class="div-yes">
                              <b>{{ liuYueData[index - 1][1] }}</b>
                            </div>
                            <b>
                              <div class="div-yes size-10">{{ liuYueData[index - 1][2] }}</div>
                            </b>
                            <b>
                              <div class="div-yes" v-html="bzc(liuYueData[index - 1][3])"></div>
                            </b>
                            <b>
                              <div class="div-yes shiShen3">{{ liuYueData[index - 1][4] }}</div>
                            </b>
                            <b>
                              <div class="div-yes shiShen3">{{ liuYueData[index - 1][5] }}</div>
                            </b>
                          </span>
                          <span v-else
                            @click="liuYueQieHuanMethod(index, liuYueData[index - 1][0], liuYueData[index - 1][3])">
                            <div class="div-no">{{ liuYueData[index - 1][1] }}</div>
                            <div class="div-no size-10">{{ liuYueData[index - 1][2] }}</div>
                            <div class="div-no" v-html="bzc(liuYueData[index - 1][3])"></div>
                            <div class="div-no shiShen3">{{ liuYueData[index - 1][4] }}</div>
                            <div class="div-no shiShen3">{{ liuYueData[index - 1][5] }}</div>
                          </span>
                        </div>
                      </div>

                      <!-- 五行旺衰 -->
                      <div class="wxws">
                        <Row>
                          <Col span="4" class="average ml">
                          <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[0])"></span>
                          </Col>
                          <Col span="4" class="average">
                          <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[1])"></span>
                          </Col>
                          <Col span="4" class="average">
                          <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[2])"></span>
                          </Col>
                          <Col span="4" class="average">
                          <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[3])"></span>
                          </Col>
                          <Col span="4" class="average">
                          <span v-html="wxwsc(dataWanZheng.wuXingWangShuai[4])"></span>
                          </Col>
                        </Row>
                      </div>

                      <!-- 干支关系 -->
                      <div class="gzgx">

                        <!-- 干支关系1（四柱） -->
                        <span v-show="mingPanMode == 1">
                          <Row>
                            <Col span="24" class="mb">
                            <span class="title">
                              天干关系：
                            </span>
                            <span v-if="dataWanZheng.tianGanLiuYi">
                              <span v-if="dataWanZheng.tianGanLiuYi.length !== 0" class="sp">
                                {{ dataWanZheng.tianGanLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                            <Col span="24" class="ml">
                            <span class="title">
                              地支关系：
                            </span>
                            <span v-if="dataWanZheng.diZhiLiuYi">
                              <span v-if="dataWanZheng.diZhiLiuYi.length !== 0" class="sp">
                                {{ dataWanZheng.diZhiLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                          </Row>
                        </span>

                        <!-- 干支关系2（四柱+大运、流年） -->
                        <span v-show="mingPanMode == 2">
                          <Row>
                            <Col span="24" class="mb ml">
                            <span class="title">
                              天干关系：
                            </span>
                            <span v-if="yunNianTianGanLiuYi">
                              <span v-if="yunNianTianGanLiuYi.length !== 0" class="sp">
                                {{ yunNianTianGanLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                            <Col span="24" class="ml">
                            <span class="title">
                              地支关系：
                            </span>
                            <span v-if="yunNianDiZhiLiuYi">
                              <span v-if="yunNianDiZhiLiuYi.length !== 0" class="sp">
                                {{ yunNianDiZhiLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                          </Row>
                        </span>

                        <!-- 干支关系3（四柱+大运、流年、流月） -->
                        <span v-show="mingPanMode == 3">
                          <Row>
                            <Col span="24" class="mb ml">
                            <span class="title">
                              天干关系：
                            </span>
                            <span v-if="yunNianYueTianGanLiuYi">
                              <span v-if="yunNianYueTianGanLiuYi.length !== 0" class="sp">
                                {{ yunNianYueTianGanLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                            <Col span="24" class="ml">
                            <span class="title">
                              地支关系：
                            </span>
                            <span v-if="yunNianYueDiZhiLiuYi">
                              <span v-if="yunNianYueDiZhiLiuYi.length !== 0" class="sp">
                                {{ yunNianYueDiZhiLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                          </Row>
                        </span>

                        <!-- 干支关系4（四柱+胎元、胎息、命宫、身宫） -->
                        <span v-show="mingPanMode == 4">
                          <Row>
                            <Col span="24" class="mb ml">
                            <span class="title">
                              天干关系：
                            </span>
                            <span v-if="taiMingShenTianGanLiuYi">
                              <span v-if="taiMingShenTianGanLiuYi.length !== 0" class="sp">
                                {{ taiMingShenTianGanLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                            <Col span="24" class="ml">
                            <span class="title">
                              地支关系：
                            </span>
                            <span v-if="taiMingShenDiZhiLiuYi">
                              <span v-if="taiMingShenDiZhiLiuYi.length !== 0" class="sp">
                                {{ taiMingShenDiZhiLiuYi.join('，') }}
                              </span>
                              <span v-else class="null">暂无数据</span>
                            </span>
                            </Col>
                          </Row>
                        </span>

                      </div>

                    </div>
                    </Col>

                  </Row>
                </div>

                <!-- 其他信息 -->
                <div class="qiTa" v-show="dataWanZhengPage === 3">

                  <!-- 彭祖百忌 -->
                  <el-card class="pzbj" shadow="never">
                    <template #header>
                      <div class="header2">
                        彭祖百忌
                      </div>
                    </template>
                    <div>
                      <span class="title">参考</span>
                      <span>{{ dataWanZheng.pengZuBaiJi }}</span>
                    </div>
                  </el-card>

                  <!-- 日柱论命 -->
                  <el-card class="rzlm" shadow="never">
                    <template #header>
                      <div class="header2">
                        日柱论命
                      </div>
                    </template>
                    <div>
                      <span class="title">参考</span>
                      <span>{{ dataWanZheng.dayZhuLunMing }}</span>
                    </div>
                  </el-card>

                  <!-- 运势分析 -->
                  <el-card class="yyfx" shadow="never">
                    <template #header>
                      <div class="header2">
                        运势分析
                      </div>
                    </template>
                    <div>
                      <span class="title">参考</span>
                      <span>{{ dataWanZheng.yunShiFenXi }}</span>
                    </div>
                  </el-card>

                  <!-- 五行分析 -->
                  <el-card class="wxfx" shadow="never">
                    <template #header>
                      <div class="header2">
                        五行分析
                      </div>
                    </template>
                    <div>
                      <span class="title">参考</span>
                      <span class="item">{{ dataWanZheng.wuXingFenXi }}</span>
                    </div>
                  </el-card>

                  <!-- 性格分析 -->
                  <el-card class="yyfx" shadow="never">
                    <template #header>
                      <div class="header2">
                        性格分析
                      </div>
                    </template>
                    <div>
                      <span class="title">先天性格参考</span>
                      <span>{{ dataWanZheng.xianTianXingGeFenXi }}</span>
                    </div>
                    <div class="mt">
                      <span class="title">潜在性格参考</span>
                      <span>{{ dataWanZheng.qianZaiXingGeFenXi }}</span>
                    </div>
                    <div class="mt">
                      <span class="title">外显性格参考</span>
                      <span>{{ dataWanZheng.waiXianXingGeFenXi }}</span>
                    </div>
                  </el-card>

                  <!-- 骨重 -->
                  <el-card class="gz" shadow="never">
                    <template #header>
                      <div class="header2">
                        袁天罡称骨
                      </div>
                    </template>
                    <div>
                      <span class="title">骨重</span>
                      <b class="item">{{ dataWanZheng.guZhong }}</b>
                    </div>
                    <div class="mt">
                      <span class="title">批注</span>
                      <span>{{ dataWanZheng.guZhongPiZhu }}</span>
                    </div>
                  </el-card>

                  <!-- 星宿 -->
                  <el-card class="xx" shadow="never">
                    <template #header>
                      <div class="header2">
                        星宿
                      </div>
                    </template>
                    <div>
                      <span class="title">星宿</span>
                      <b class="item">
                        {{ dataWanZheng.xingXiu }}（{{ dataWanZheng.xiuJiXiong }}）
                      </b>
                    </div>
                    <div class="mt">
                      <span class="title">歌诀</span>
                      <span class="mt">{{ dataWanZheng.xiuJiXiongGeJue }}</span>
                    </div>
                  </el-card>

                  <!-- 命卦 -->
                  <el-card class="mg" shadow="never">
                    <template #header>
                      <div class="header2">
                        命卦
                      </div>
                    </template>
                    <div>
                      <span class="title">命卦</span>
                      <b class="item">
                        {{ dataWanZheng.mingGua }}
                      </b>
                    </div>
                    <div class="mt">
                      <span class="title">基本参考</span>
                      <span class="mt">{{ dataWanZheng.mingGuaJiBen }}</span>
                    </div>
                    <div class="mt">
                      <span class="title">风水参考</span>
                      <span class="mt">{{ dataWanZheng.mingGuaFengShui }}</span>
                    </div>
                  </el-card>

                  <!-- 更多信息提示 -->
                  <div class="gd">
                    更多信息正在完善中 ...
                  </div>

                </div>

                <!-- 干支参考 -->
                <div class="ganZhi" v-show="dataWanZhengPage === 4">

                  <div class="gzb">
                    <span class="bu">
                      <Button size="small" v-if="ganZhiCanKao == 1" class="yes">天干关系</Button>
                      <Button size="small" v-else @click="ganZhiCanKao = 1" class="no">天干关系</Button>
                    </span>
                    <span class="bu">
                      <Button size="small" v-if="ganZhiCanKao == 2" class="yes">地支关系</Button>
                      <Button size="small" v-else @click="ganZhiCanKao = 2" class="no">地支关系</Button>
                    </span>
                  </div>

                  <div class="jb1">

                    <el-tabs v-model="tianGanCanKao" stretch="true" v-show="ganZhiCanKao == 1">

                      <el-tab-pane label="天干相生" name="1">
                        <div class="data-gz">
                          <span v-html="bzc2('甲')"></span><span v-html="bzc2('丙')"></span>相生，<span
                            v-html="bzc2('甲')"></span><span v-html="bzc2('丁')"></span>相生，<span
                            v-html="bzc2('乙')"></span><span v-html="bzc2('丙')"></span>相生，<span
                            v-html="bzc2('乙')"></span><span v-html="bzc2('丁')"></span>相生<br />
                          <span v-html="bzc2('丙')"></span><span v-html="bzc2('戊')"></span>相生，<span
                            v-html="bzc2('丙')"></span><span v-html="bzc2('己')"></span>相生，<span
                            v-html="bzc2('丁')"></span><span v-html="bzc2('戊')"></span>相生，<span
                            v-html="bzc2('丁')"></span><span v-html="bzc2('己')"></span>相生<br />
                          <span v-html="bzc2('戊')"></span><span v-html="bzc2('庚')"></span>相生，<span
                            v-html="bzc2('戊')"></span><span v-html="bzc2('辛')"></span>相生，<span
                            v-html="bzc2('己')"></span><span v-html="bzc2('庚')"></span>相生，<span
                            v-html="bzc2('己')"></span><span v-html="bzc2('辛')"></span>相生<br />
                          <span v-html="bzc2('庚')"></span><span v-html="bzc2('壬')"></span>相生，<span
                            v-html="bzc2('庚')"></span><span v-html="bzc2('癸')"></span>相生，<span
                            v-html="bzc2('辛')"></span><span v-html="bzc2('壬')"></span>相生，<span
                            v-html="bzc2('辛')"></span><span v-html="bzc2('癸')"></span>相生<br />
                          <span v-html="bzc2('壬')"></span><span v-html="bzc2('甲')"></span>相生，<span
                            v-html="bzc2('壬')"></span><span v-html="bzc2('乙')"></span>相生，<span
                            v-html="bzc2('癸')"></span><span v-html="bzc2('甲')"></span>相生，<span
                            v-html="bzc2('癸')"></span><span v-html="bzc2('乙')"></span>相生
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="天干相合" name="2">
                        <div class="data-gz">
                          <span v-html="bzc2('甲')"></span><span v-html="bzc2('己')"></span>合化<span
                            v-html="wxwsc('土')"></span>
                          <br />
                          <span v-html="bzc2('乙')"></span><span v-html="bzc2('庚')"></span>合化<span
                            v-html="wxwsc('金')"></span>
                          <br />
                          <span v-html="bzc2('丙')"></span><span v-html="bzc2('辛')"></span>合化<span
                            v-html="wxwsc('水')"></span>
                          <br />
                          <span v-html="bzc2('丁')"></span><span v-html="bzc2('壬')"></span>合化<span
                            v-html="wxwsc('木')"></span>
                          <br />
                          <span v-html="bzc2('戊')"></span><span v-html="bzc2('癸')"></span>合化<span
                            v-html="wxwsc('火')"></span>
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="天干相冲" name="3">
                        <div class="data-gz">
                          <span v-html="bzc2('甲')"></span><span v-html="bzc2('庚')"></span>相冲
                          <br />
                          <span v-html="bzc2('乙')"></span><span v-html="bzc2('辛')"></span>相冲
                          <br />
                          <span v-html="bzc2('丙')"></span><span v-html="bzc2('壬')"></span>相冲
                          <br />
                          <span v-html="bzc2('丁')"></span><span v-html="bzc2('癸')"></span>相冲
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="天干相克" name="4">
                        <div class="data-gz">
                          <span v-html="bzc2('甲')"></span><span v-html="bzc2('戊')"></span>相克，<span
                            v-html="bzc2('乙')"></span><span v-html="bzc2('己')"></span>相克
                          <br />
                          <span v-html="bzc2('丙')"></span><span v-html="bzc2('庚')"></span>相克，<span
                            v-html="bzc2('丁')"></span><span v-html="bzc2('辛')"></span>相克
                          <br />
                          <span v-html="bzc2('戊')"></span><span v-html="bzc2('壬')"></span>相克，<span
                            v-html="bzc2('己')"></span><span v-html="bzc2('癸')"></span>相克
                          <br />
                          <span v-html="bzc2('庚')"></span><span v-html="bzc2('甲')"></span>相克，<span
                            v-html="bzc2('辛')"></span><span v-html="bzc2('乙')"></span>相克
                          <br />
                          <span v-html="bzc2('壬')"></span><span v-html="bzc2('丙')"></span>相克，<span
                            v-html="bzc2('癸')"></span><span v-html="bzc2('丁')"></span>相克
                        </div>
                      </el-tab-pane>

                    </el-tabs>

                    <el-tabs v-model="diZhiCanKao" stretch="true" v-show="ganZhiCanKao == 2">

                      <el-tab-pane label="地支半合" name="1">
                        <div class="data-gz">
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('午')"></span>半合<span
                            v-html="wxwsc('火')"></span>局，<span v-html="bzc2('申')"></span><span
                            v-html="bzc2('子')"></span>半合<span v-html="wxwsc('水')"></span>局
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('酉')"></span>半合<span
                            v-html="wxwsc('金')"></span>局，<span v-html="bzc2('亥')"></span><span
                            v-html="bzc2('卯')"></span>半合<span v-html="wxwsc('木')"></span>局
                          <br />
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('辰')"></span>半合<span
                            v-html="wxwsc('水')"></span>局，<span v-html="bzc2('午')"></span><span
                            v-html="bzc2('戌')"></span>半合<span v-html="wxwsc('火')"></span>局
                          <br />
                          <span v-html="bzc2('卯')"></span><span v-html="bzc2('未')"></span>半合<span
                            v-html="wxwsc('木')"></span>局，<span v-html="bzc2('酉')"></span><span
                            v-html="bzc2('丑')"></span>半合<span v-html="wxwsc('金')"></span>局
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支拱合" name="2">
                        <div class="data-gz">
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('戌')"></span>拱合<span
                            v-html="bzc2('午')"></span>（<span v-html="wxwsc('火')"></span>局）
                          <br />
                          <span v-html="bzc2('申')"></span><span v-html="bzc2('辰')"></span>拱合<span
                            v-html="bzc2('子')"></span>（<span v-html="wxwsc('水')"></span>局）
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('丑')"></span>拱合<span
                            v-html="bzc2('酉')"></span>（<span v-html="wxwsc('金')"></span>局）
                          <br />
                          <span v-html="bzc2('亥')"></span><span v-html="bzc2('未')"></span>拱合<span
                            v-html="bzc2('卯')"></span>（<span v-html="wxwsc('木')"></span>局）
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支暗合" name="3">
                        <div class="data-gz">
                          <span v-html="bzc2('卯')"></span><span v-html="bzc2('申')"></span>暗合，<span
                            v-html="bzc2('午')"></span><span v-html="bzc2('亥')"></span>暗合
                          <br />
                          <span v-html="bzc2('丑')"></span><span v-html="bzc2('寅')"></span>暗合，<span
                            v-html="bzc2('寅')"></span><span v-html="bzc2('未')"></span>暗合
                          <br />
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('午')"></span>暗合，<span
                            v-html="bzc2('子')"></span><span v-html="bzc2('戌')"></span>暗合
                          <br />
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('辰')"></span>暗合，<span
                            v-html="bzc2('子')"></span><span v-html="bzc2('巳')"></span>暗合
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('酉')"></span>暗合
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支三合" name="4">
                        <div class="data-gz">
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('午')"></span><span
                            v-html="bzc2('戌')"></span>三合<span v-html="wxwsc('火')"></span>局
                          <br />
                          <span v-html="bzc2('申')"></span><span v-html="bzc2('子')"></span><span
                            v-html="bzc2('辰')"></span>三合<span v-html="wxwsc('水')"></span>局
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('酉')"></span><span
                            v-html="bzc2('丑')"></span>三合<span v-html="wxwsc('金')"></span>局
                          <br />
                          <span v-html="bzc2('亥')"></span><span v-html="bzc2('卯')"></span><span
                            v-html="bzc2('未')"></span>三合<span v-html="wxwsc('木')"></span>局
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支六合" name="5">
                        <div class="data-gz">
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('丑')"></span>合化<span
                            v-html="wxwsc('土')"></span>
                          <br />
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('亥')"></span>合化<span
                            v-html="wxwsc('木')"></span>
                          <br />
                          <span v-html="bzc2('卯')"></span><span v-html="bzc2('戌')"></span>合化<span
                            v-html="wxwsc('火')"></span>
                          <br />
                          <span v-html="bzc2('辰')"></span><span v-html="bzc2('酉')"></span>合化<span
                            v-html="wxwsc('金')"></span>
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('申')"></span>合化<span
                            v-html="wxwsc('水')"></span>
                          <br />
                          <span v-html="bzc2('午')"></span><span v-html="bzc2('未')"></span>合化<span
                            v-html="wxwsc('火')"></span>
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支相刑" name="6">
                        <div class="data-gz">
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('巳')"></span>相刑，<span
                            v-html="bzc2('巳')"></span><span v-html="bzc2('申')"></span>相刑
                          <br />
                          <span v-html="bzc2('申')"></span><span v-html="bzc2('寅')"></span>相刑，<span
                            v-html="bzc2('丑')"></span><span v-html="bzc2('戌')"></span>相刑
                          <br />
                          <span v-html="bzc2('戌')"></span><span v-html="bzc2('未')"></span>相刑，<span
                            v-html="bzc2('未')"></span><span v-html="bzc2('丑')"></span>相刑
                          <br />
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('卯')"></span>相刑，<span
                            v-html="bzc2('酉')"></span><span v-html="bzc2('酉')"></span>自刑
                          <br />
                          <span v-html="bzc2('亥')"></span><span v-html="bzc2('亥')"></span>自刑，<span
                            v-html="bzc2('午')"></span><span v-html="bzc2('午')"></span>自刑
                          <br />
                          <span v-html="bzc2('辰')"></span><span v-html="bzc2('辰')"></span>自刑
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支三刑" name="7">
                        <div class="data-gz">
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('巳')"></span><span
                            v-html="bzc2('申')"></span>三刑
                          <br />
                          <span v-html="bzc2('丑')"></span><span v-html="bzc2('戌')"></span><span
                            v-html="bzc2('未')"></span>三刑
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支相冲" name="8">
                        <div class="data-gz">
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('午')"></span>相冲
                          <br />
                          <span v-html="bzc2('丑')"></span><span v-html="bzc2('未')"></span>相冲
                          <br />
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('申')"></span>相冲
                          <br />
                          <span v-html="bzc2('卯')"></span><span v-html="bzc2('酉')"></span>相冲
                          <br />
                          <span v-html="bzc2('辰')"></span><span v-html="bzc2('戌')"></span>相冲
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('亥')"></span>相冲
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支相破" name="9">
                        <div class="data-gz">
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('酉')"></span>相破
                          <br />
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('亥')"></span>相破
                          <br />
                          <span v-html="bzc2('卯')"></span><span v-html="bzc2('午')"></span>相破
                          <br />
                          <span v-html="bzc2('辰')"></span><span v-html="bzc2('丑')"></span>相破
                          <br />
                          <span v-html="bzc2('巳')"></span><span v-html="bzc2('申')"></span>相破
                          <br />
                          <span v-html="bzc2('戌')"></span><span v-html="bzc2('未')"></span>相破
                        </div>
                      </el-tab-pane>

                      <el-tab-pane label="地支相害" name="10">
                        <div class="data-gz">
                          <span v-html="bzc2('子')"></span><span v-html="bzc2('未')"></span>相害
                          <br />
                          <span v-html="bzc2('丑')"></span><span v-html="bzc2('午')"></span>相害
                          <br />
                          <span v-html="bzc2('寅')"></span><span v-html="bzc2('巳')"></span>相害
                          <br />
                          <span v-html="bzc2('卯')"></span><span v-html="bzc2('辰')"></span>相害
                          <br />
                          <span v-html="bzc2('申')"></span><span v-html="bzc2('亥')"></span>相害
                          <br />
                          <span v-html="bzc2('酉')"></span><span v-html="bzc2('戌')"></span>相害
                        </div>
                      </el-tab-pane>

                    </el-tabs>

                  </div>

                </div>
              </div>

            </div>
          </el-card>
          </Col>

          <!-- 2.2、完整数据加载框架 -->
          <Col span="24" v-if="!dataWanZhengStatus">
          <el-card shadow="never" class="wz-card2">
            <Skeleton loading animated :title="false"
              :paragraph="{ rows: 15, width: ['70%', '65%', '70%', '70%', '80%', '75%', '80%', '80%', '90%', '90%', '70%', '100%', '80%', '85%', '100%'] }" />
          </el-card>
          </Col>

        </Row>
      </div>

      <!-- ********************************************************************************************************************* -->


      <!-- 更多选项弹窗 -->
      <Modal v-model="moreOptionsModal" scrollable="ture" class="moreOptionsModal" :styles="{ top: '30px', minWidth: '550px' }">

        <template #header>
          <b class="header">
            <Icon type="ios-settings" />
            更多选项
          </b>
        </template>

        <Tabs size="small" class="tabs">

          <TabPane label="四柱选项" class="siZhu">

            <div>
              年柱（年干支）排法：
              <Select transfer v-model="yearGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option v-for="item in yearGanZhiSetOptions" :label="item.label" :value="item.value">
                  {{ item.label }}
                  <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="yearGanZhiSet !== 1" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

            <div class="mt">
              月柱（月干支）排法：
              <Select transfer v-model="monthGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option v-for="item in monthGanZhiSetOptions" :label="item.label" :value="item.value">
                  {{ item.label }}
                  <span v-if="item.value === 1" style="float:right; color:#8492a6; font-size:12px;">
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="monthGanZhiSet !== 1" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

            <div class="mt">
              日柱（日干支）排法：
              <Select transfer v-model="dayGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option v-for="item in dayGanZhiSetOptions" :label="item.label" :value="item.value">
                  {{ item.label }}
                  <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="dayGanZhiSet !== 0" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

            <div class="mt">
              时柱（时干支）排法：
              <Select transfer v-model="hourGanZhiSet" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option v-for="item in hourGanZhiSetOptions" :label="item.label" :value="item.value">
                  {{ item.label }}
                  <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span v-if="hourGanZhiSet !== 0" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

          </TabPane>

          <TabPane label="通用选项" class="tongYong">

            <div class="daYunLun">
              大运轮数：
              <InputNumber :max="16" :min="10" v-model="daYunLunSet" class="input" />
              轮
              <a @click="daYunLunSet = 10" class="res">
                <Icon type="md-refresh" />
                重置
              </a>
            </div>

            <div class="renYuan">
              人元司令分野类型：
              <Select transfer v-model="renYuanType" class="select">
                <template #prefix>
                  <span class="prefix">
                    <Icon type="ios-cube-outline" />
                  </span>
                </template>
                <Option v-for="item in renYuanTypeOptions " :label="item.label" :value="item.value">
                  {{ item.label }}
                  <span v-if="item.value === 0" style="float:right; color:#8492a6; font-size:12px;">
                    <Icon type="md-arrow-dropleft-circle" />
                    默认
                  </span>
                </Option>
              </Select>
              <span class="ck" @click="renYuanCanKaoModal = true">
                参考
                <Icon type="ios-open-outline" />
              </span>
              <span v-if="renYuanType !== 0" class="fmr">
                <Icon type="md-arrow-dropleft-circle" />
                非默认
              </span>
            </div>

          </TabPane>

          <TabPane label="部分天干关系" class="tianGan">

            <Row class="row bcl1">
              <Col span="12">
              天干相生：
              <el-switch v-model="tianGanXiangShengSet" inline-prompt active-text="显示" inactive-text="关闭"
                style="--el-switch-on-color:#13ce66;" />
              </Col>
              <Col span="12">
              天干相合：
              <el-switch v-model="tianGanXiangHeSet" inline-prompt active-text="显示" inactive-text="关闭"
                style="--el-switch-on-color:#13ce66;" />
              </Col>
            </Row>

            <Row class="row bcl2">
              <Col span="12">
              天干相冲：
              <el-switch v-model="tianGanXiangChongSet" inline-prompt active-text="显示" inactive-text="关闭"
                style="--el-switch-on-color:#13ce66;" />
              </Col>
              <Col span="12">
              天干相克：
              <el-switch v-model="tianGanXiangKeSet" inline-prompt active-text="显示" inactive-text="关闭"
                style="--el-switch-on-color:#13ce66;" />
              </Col>
            </Row>

          </TabPane>

          <TabPane label="部分地支关系" class="diZhi">

            <Row class="row bcl1">
              <Col span="12">
              <div>
                地支半合：
                <el-switch v-model="diZhiBanHeSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
              <Col span="12">
              <div>
                地支拱合：
                <el-switch v-model="diZhiGongHeSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
            </Row>

            <Row class="row bcl2">
              <Col span="12">
              <div>
                地支暗合：
                <el-switch v-model="diZhiAnHeSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
              <Col span="12">
              <div>
                地支三合：
                <el-switch v-model="diZhiSanHeSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" disabled="true" />
                <span class="popover">
                  <el-tooltip placement="right" :enterable="false">
                    <template #content>
                      <div>
                        功能正在完善中 ...
                      </div>
                    </template>
                    <Icon type="md-alert" />
                  </el-tooltip>
                </span>
              </div>
              </Col>
            </Row>

            <Row class="row bcl1">
              <Col span="12">
              <div>
                地支六合：
                <el-switch v-model="diZhiLiuHeSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
              <Col span="12">
              <div>
                地支相刑：
                <el-switch v-model="diZhiXiangXingSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
            </Row>

            <Row class="row bcl2">
              <Col span="12">
              <div>
                地支三刑：
                <el-switch v-model="diZhiSanXingSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" disabled="true" />
                <span class="popover">
                  <el-tooltip placement="right" :enterable="false">
                    <template #content>
                      <div>
                        功能正在完善中 ...
                      </div>
                    </template>
                    <Icon type="md-alert" />
                  </el-tooltip>
                </span>
              </div>
              </Col>
              <Col span="12">
              <div>
                地支相冲：
                <el-switch v-model="diZhiXiangChongSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
            </Row>

            <Row class="row bcl1">
              <Col span="12">
              <div>
                地支相破：
                <el-switch v-model="diZhiXiangPoSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
              <Col span="12">
              <div>
                地支相害：
                <el-switch v-model="diZhiXiangHaiSet" inline-prompt active-text="显示" inactive-text="关闭"
                  style="--el-switch-on-color:#13ce66;" />
              </div>
              </Col>
            </Row>

          </TabPane>

          <TabPane label="常用神煞选项" class="shenSha">
            <div class="box">

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  太极贵人：
                  <el-switch v-model="taiJiGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  天乙贵人：
                  <el-switch v-model="tianYiGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  福星贵人：
                  <el-switch v-model="fuXingGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  文昌贵人：
                  <el-switch v-model="wenChangGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  天厨贵人：
                  <el-switch v-model="tianChuGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  月德贵人：
                  <el-switch v-model="yueDeGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  德秀贵人：
                  <el-switch v-model="deXiuGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  天德贵人：
                  <el-switch v-model="tianDeGuiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  十恶大败：
                  <el-switch v-model="shiEDaBaiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  阴差阳错：
                  <el-switch v-model="yinChaYangCuoSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">四废日：</span>
                  <el-switch v-model="siFeiRiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">六秀日：</span>
                  <el-switch v-model="liuXiuRiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r1">十灵日：</span>
                  <el-switch v-model="shiLingRiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">魁罡日：</span>
                  <el-switch v-model="kuiGangRiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">八专日：</span>
                  <el-switch v-model="baZhuanRiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  <span class="r1">九丑日：</span>
                  <el-switch v-model="jiuChouRiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">孤鸾煞：</span>
                  <el-switch v-model="guLuanShaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">红艳煞：</span>
                  <el-switch v-model="hongYanShaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r1">勾绞煞：</span>
                  <el-switch v-model="gouJiaoShaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r1">童子煞：</span>
                  <el-switch v-model="tongZiShaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">华盖：</span>
                  <el-switch v-model="huaGaiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  <span class="r2">国印：</span>
                  <el-switch v-model="guoYinSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">金舆：</span>
                  <el-switch v-model="jinYuSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">羊刃：</span>
                  <el-switch v-model="yangRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r2">飞刃：</span>
                  <el-switch v-model="feiRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">流霞：</span>
                  <el-switch v-model="liuXiaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">禄神：</span>
                  <el-switch v-model="luShenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  <span class="r2">驿马：</span>
                  <el-switch v-model="yiMaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">劫煞：</span>
                  <el-switch v-model="jieShaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">将星：</span>
                  <el-switch v-model="jiangXingSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r2">桃花：</span>
                  <el-switch v-model="taoHuaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">亡神：</span>
                  <el-switch v-model="wangShenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">吊客：</span>
                  <el-switch v-model="diaoKeSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  <span class="r2">披麻：</span>
                  <el-switch v-model="piMaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">天喜：</span>
                  <el-switch v-model="tianXiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">红鸾：</span>
                  <el-switch v-model="hongLuanSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r2">丧门：</span>
                  <el-switch v-model="sangMenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">灾煞：</span>
                  <el-switch v-model="zaiShaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">孤辰：</span>
                  <el-switch v-model="guChenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  <span class="r2">寡宿：</span>
                  <el-switch v-model="suGuaSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">元辰：</span>
                  <el-switch v-model="yuanChenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">血刃：</span>
                  <el-switch v-model="xueRenSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r2">天医：</span>
                  <el-switch v-model="tianYiSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">词馆：</span>
                  <el-switch v-model="ciGuanSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">学堂：</span>
                  <el-switch v-model="xueTangSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl2">
                <Col span="8">
                <div>
                  <span class="r2">天赦：</span>
                  <el-switch v-model="tianSheSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">天转：</span>
                  <el-switch v-model="tianZhuanSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                <div>
                  <span class="r2">地转：</span>
                  <el-switch v-model="diZhuanSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
              </Row>

              <Row class="row bcl1">
                <Col span="8">
                <div>
                  <span class="r2">拱禄：</span>
                  <el-switch v-model="gongLuSet" inline-prompt active-text="显示" inactive-text="关闭"
                    style="--el-switch-on-color:#13ce66;" />
                </div>
                </Col>
                <Col span="8">
                </Col>
                <Col span="8">
                </Col>
              </Row>

            </div>
          </TabPane>

        </Tabs>

        <template #footer>
          <Button long @click="moreOptionsModal = false" class="footer">确认</Button>
        </template>

      </Modal>


      <!-- 四柱转日期弹窗 -->
      <Modal v-model="siZhuToDateModal" scrollable="ture" class="siZhuToDateModal" :styles="{ top: '30px', minWidth: '600px' }">

        <template #header>
          <b class="header">
            <Icon type="ios-apps" />
            四柱转日期
          </b>
        </template>

        <div v-if="siZhuToDateTotal === 0" class="siZhu">

          <div class="beginYear">
            年份查询范围：
            <InputNumber :max="new Date().getFullYear()" :min="100" v-model="beginYear" class="input" />

            <!-- <input placeholder="请输入起始年份" v-model="beginYear" class="beginYear" maxlength="4"
              oninput="value=value.replace(/[^\d]/g,'')" /> -->

            年 ~ 至今
            <a @click="beginYear = 1900" class="res">
              <Icon type="md-refresh" />
              重置
            </a>
          </div>

          <div>
            年柱（年干支）：
            <Select transfer v-model="yearGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions" :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === yearGanZhiBackups" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </Option>
            </Select>
            <span v-if="yearGanZhi !== yearGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻年柱
            </span>
          </div>

          <div class="mt">
            月柱（月干支）：
            <Select transfer v-model="monthGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions" :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === monthGanZhiBackups" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </Option>
            </Select>
            <span v-if="monthGanZhi !== monthGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻月柱
            </span>
          </div>

          <div class="mt">
            日柱（日干支）：
            <Select transfer v-model="dayGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions" :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === dayGanZhiBackups" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </Option>
            </Select>
            <span v-if="dayGanZhi !== dayGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻日柱
            </span>
          </div>

          <div class="mt">
            时柱（时干支）：
            <Select transfer v-model="hourGanZhi" class="select">
              <template #prefix>
                <span class="prefix">
                  <Icon type="ios-compass-outline" />
                </span>
              </template>
              <Option v-for="item in ganZhiOptions" :label="item.label" :value="item.value">
                {{ item.label }}
                <span v-if="item.label === hourGanZhiBackups" style="float:right; color:#8492a6; font-size:12px;">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </Option>
            </Select>
            <span v-if="hourGanZhi !== hourGanZhiBackups" class="fmr">
              <Icon type="md-arrow-dropleft-circle" />
              非此刻时柱
            </span>
          </div>

        </div>

        <div v-if="siZhuToDateTotal !== 0" class="data-sz">
          <Table height="235" size="small" highlight-row :columns="siZhuToDateColumns" :data="siZhuToDate">
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDateMethod(row.solar)">选择</Button>
            </template>
          </Table>
          <div class="sm">
            从公元{{ beginYear }}年~至今共&nbsp;{{ siZhuToDateTotal }}&nbsp;条日期
            【{{ yearGanZhiBackups2 + '&nbsp;' + monthGanZhiBackups2 + '&nbsp;' + dayGanZhiBackups2 + '&nbsp;'
              + hourGanZhiBackups2 }}】
          </div>
        </div>

        <template #footer>
          <span v-if="siZhuToDateTotal === 0">
            <Button :disabled="!siZhuToDateButtonStatus" long @click="getSiZhuToDateMethod" class="footer">获取日期</Button>
          </span>
          <span v-else>
            <Button @click="siZhuToDateTotal = 0" long class="footer">重新获取</Button>
          </span>
        </template>

      </Modal>


      <!-- 人元司令分野参考弹窗 -->
      <Modal v-model="renYuanCanKaoModal" scrollable="ture" class="renYuanCanKaoModal" :styles="{ top: '30px', minWidth: '500px' }">

        <template #header>
          <b style="font-size:16px;">
            <Icon type="ios-book" />
            人元司令分野参考
          </b>
        </template>

        <div>

          <Tabs size="small" style="min-height:210px; margin-top:-15px;">

            <TabPane label="子平真诠法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊五日，庚九日，丙十六日</p>
                <p><b>午月</b>：丙十日，己九日，丁十一日</p>
                <p><b>未月</b>：丁九日，乙三日，己十八日</p>
                <p><b>申月</b>：戊己十日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="渊海子平法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊五日，庚九日，丙十六日</p>
                <p><b>午月</b>：丙十日，己十日，丁十日</p>
                <p><b>未月</b>：丁九日，乙三日，己十八日</p>
                <p><b>申月</b>：己七日，戊三日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="星平会海法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊五日，庚九日，丙十六日</p>
                <p><b>午月</b>：丙十日，己九日，丁十一日</p>
                <p><b>未月</b>：丁九日，乙二日，己十八日</p>
                <p><b>申月</b>：己七日，戊三日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="三命通会法决">
              <div>
                <p><b>子月</b>：壬九日，辛三日，癸十八日</p>
                <p><b>丑月</b>：癸七日，辛五日，己十八日</p>
                <p><b>寅月</b>：己七日，丙五日，甲十八日</p>
                <p><b>卯月</b>：甲九日，癸三日，乙十八日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊七日，庚五日，丙十八日</p>
                <p><b>午月</b>：丙九日，乙三日，丁十八日</p>
                <p><b>未月</b>：丁七日，乙五日，己十八日</p>
                <p><b>申月</b>：己七日，戊三日，壬三日，庚十七日</p>
                <p><b>酉月</b>：庚七日，丁三日，辛二十日</p>
                <p><b>戌月</b>：辛七日，丁五日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲五日，壬十八日</p>
              </div>
            </TabPane>

            <TabPane label="神峰通考法决">
              <div>
                <p><b>子月</b>：壬十日，癸二十二日</p>
                <p><b>丑月</b>：癸九日，辛三日，己十八日</p>
                <p><b>寅月</b>：戊七日，丙七日，甲十六日</p>
                <p><b>卯月</b>：甲十日，乙二十日</p>
                <p><b>辰月</b>：乙九日，癸三日，戊十八日</p>
                <p><b>巳月</b>：戊七日，庚七日，丙十六日</p>
                <p><b>午月</b>：丙十日，己七日，丁十三日</p>
                <p><b>未月</b>：丁九日，乙三日，己十八日</p>
                <p><b>申月</b>：戊七日，壬七日，庚十六日</p>
                <p><b>酉月</b>：庚十日，辛二十日</p>
                <p><b>戌月</b>：辛九日，丁三日，戊十八日</p>
                <p><b>亥月</b>：戊七日，甲七日，壬十六日</p>
              </div>
            </TabPane>

            <TabPane label="万育吾之法决">
              <div>
                <p><b>子月</b>：壬七日，癸二十三日</p>
                <p><b>丑月</b>：癸七日，庚五日，己十八日</p>
                <p><b>寅月</b>：己五日，丙五日，甲二十日</p>
                <p><b>卯月</b>：甲七日，乙二十三日</p>
                <p><b>辰月</b>：乙七日，壬五日，戊十八日</p>
                <p><b>巳月</b>：戊七日，庚五日，丙十八日</p>
                <p><b>午月</b>：丙七日，丁二十三日</p>
                <p><b>未月</b>：丁七日，甲五日，己十八日</p>
                <p><b>申月</b>：己五日，壬五日，庚二十日</p>
                <p><b>酉月</b>：庚七日，辛二十三日</p>
                <p><b>戌月</b>：辛七日，丙五日，戊十八日</p>
                <p><b>亥月</b>：戊五日，甲五日，壬二十日</p>
              </div>
            </TabPane>

          </Tabs>

        </div>

        <template #footer>
          <Button long @click="renYuanCanKaoModal = false" style="border-radius:5px;">确认</Button>
        </template>
      </Modal>

      
    </div>
  </div>
</template>

<style scoped lang="scss" src="@/css/tool/bazi.scss"></style>

<style lang="scss">
/* 1、更多选项弹窗 */
.moreOptionsModal {
  .header {
    font-size: 16px;
  }

  .tabs {
    min-height: 260px;
    margin-top: -15px;

    // 1.1、四柱选项
    .siZhu {
      .mt {
        margin-top: 15px;
      }

      .select {
        width: 53%;

        .prefix {
          margin: 0 8px 0 5px;
          vertical-align: -3px;
        }
      }

      .fmr {
        font-size: 12px;
        margin-left: 10px;
        color: #969696;
      }

    }

    // 1.2、通用选项
    .tongYong {

      .daYunLun {
        margin-bottom: 20px;

        .input {
          width: 52.5%;
          border: none;
          border-radius: 0;
          border-bottom: 1px rgb(220, 220, 220) solid;
        }

        .res {
          font-size: 12px;
          margin-left: 10px;
          color: rgb(85, 161, 242);
        }
      }

      .renYuan {

        .select {
          width: 45%;

          .prefix {
            margin: 0 8px 0 5px;
            vertical-align: -3px;
          }
        }

        .ck {
          margin-left: 10px;
          color: rgb(85, 161, 242);
          cursor: pointer;
          font-size: 13px;
        }

      }

      .fmr {
        font-size: 12px;
        margin-left: 10px;
        color: #969696;
      }
    }

    // 1.3、天干关系选项 
    .tianGan {
      .row {
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 15px;

        .popover {
          margin-left: 15px;
        }
      }

      .bcl1 {
        background-color: rgb(248, 248, 248);
        border: 1px rgb(232, 234, 236) solid;
      }

      .bcl2 {
        background-color: rgb(245, 245, 245);
        border: 1px rgb(232, 234, 236) solid;
      }
    }

    // 1.4、地支关系选项 
    .diZhi {
      .row {
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 15px;

        .popover {
          margin-left: 5px;
        }
      }

      .bcl1 {
        background-color: rgb(248, 248, 248);
        border: 1px rgb(232, 234, 236) solid;
      }

      .bcl2 {
        background-color: rgb(245, 245, 245);
        border: 1px rgb(232, 234, 236) solid;
      }
    }

    // 1.5、神煞选项 
    .shenSha {
      .row {
        margin-bottom: 5px;
        padding: 5px;
        border-radius: 15px;

        .r1 {
          margin-right: 17.5px;
        }

        .r2 {
          margin-right: 30px;
        }
      }

      .bcl1 {
        background-color: rgb(248, 248, 248);
        border: 1px rgb(232, 234, 236) solid;
      }

      .bcl2 {
        background-color: rgb(245, 245, 245);
        border: 1px rgb(232, 234, 236) solid;
      }

      .box {
        max-height: 260px;
        overflow-y: auto;
      }

      .box::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }

      .box::-webkit-scrollbar-track {
        // background: rgb(240, 240, 240);
      }

      .box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgb(200, 200, 200);
      }

      .box::-webkit-scrollbar-thumb:hover {
        cursor: pointer;
        background: rgb(185, 185, 185);
      }

      .box::-webkit-scrollbar-corner {
        background: rgb(185, 185, 185);
      }

    }

  }

  .footer {
    border-radius: 5px;
    background-color: rgb(249, 249, 249);
  }

}

/* 2、四柱转日期弹窗 */
.siZhuToDateModal {
  .header {
    font-size: 16px;
  }

  .siZhu {
    height: 230px;

    .beginYear {
      margin-bottom: 30px;

      .input {
        width: 182px;
        border: none;
        border-radius: 0;
        border-bottom: 1px rgb(220, 220, 220) solid;
      }
    }

    .res {
      font-size: 12px;
      margin-left: 10px;
    }

    .mt {
      margin-top: 10px;
    }

    .select {
      width: 50%;
    }

    .prefix {
      margin: 0 8px 0 5px;
      vertical-align: -3px;
    }

    .fmr {
      font-size: 12px;
      margin-left: 10px;
      color: #969696;
    }

  }

  .data-sz {
    height: 260px;
    overflow-y: auto;

    .sm {
      text-align: center;
      color: #ababab;
      margin: 5px 0 0 0;
      font-size: 12px;
    }
  }

  .data-sz::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .footer {
    border-radius: 5px;
    background-color: rgb(249, 249, 249);
  }
}
</style>